/* «Стена»: редактор, голосование, топ, проверка. Все классы с префиксом ww-, шрифты Unbounded/Manrope берутся у сайта. */
.ww { --ink: #3a2418; --ink-2: #5b3d2a; --paper: #fbf3e1; --cream: #f7ecd4; --blue: #2f5aa8; --red: #d9473b; --red-d: #b8352c;
  --gold: #f2c45a; --gold-d: #c99a2e; --green-d: #3f6b47; --tile: #f4f7f2; --grout: #cdd6cb; --paint: #623416;
  position: relative; color: var(--ink); font: 600 15px/1.35 Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ww * { box-sizing: border-box; }
:where(.ww) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.ww-ic { display: inline-block; width: 22px; height: 22px; flex: none; }
.ww-ic svg { display: block; width: 100%; height: 100%; }

/* кнопки в стиле сайта */
.ww-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 8px 12px; border-radius: 14px;
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font: 900 12px/1.15 Unbounded, sans-serif; text-align: center;
  background: linear-gradient(#ffffff, #e9eee8); transition: transform .06s, box-shadow .06s; }
.ww-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ww-btn:disabled { filter: grayscale(.8); opacity: .55; }
.ww-btn.gold { background: linear-gradient(#f8d37a, #e0a83d); }
.ww-btn.green { background: linear-gradient(#77b079, #4b8452); color: #fff8e6; }
.ww-btn.red { background: linear-gradient(#ea6a5c, #c63b30); color: #fff; }
.ww-btn.big { min-height: 56px; font-size: 15px; border-radius: 16px; }
.ww-btn.warn { background: linear-gradient(#ffd0c7, #f39a8b); }

.ww-plate { display: inline-block; padding: 8px 13px; background: #f7f4ea; border: 3px solid var(--blue); border-radius: 10px; box-shadow: 0 0 0 2.5px var(--ink), 0 5px 0 2.5px var(--ink); }
.ww-plate h2 { margin: 0; font: 900 16px/1.05 Unbounded, sans-serif; color: var(--blue); letter-spacing: .02em; text-transform: uppercase; }
.ww-plate small { display: block; font: 800 11.5px/1.2 Manrope, sans-serif; color: var(--ink-2); margin-top: 3px; }
.ww-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }

/* стена в раме */
.ww-wall { position: relative; border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: #eadbbb;
  box-shadow: 0 5px 0 rgba(30,20,12,.55), inset 0 0 0 2px rgba(255,255,255,.25); }
.ww-wall canvas { display: block; width: 100%; height: auto; aspect-ratio: 600 / 400; }
.ww-wall::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 12px; box-shadow: inset 0 0 18px rgba(60,35,10,.18); }
.ww-floor { height: 12px; border-top: 2px solid var(--ink); background: #e9eee6 linear-gradient(90deg, var(--grout) 1.5px, transparent 1.5px) 0 0 / 18px 18px; }

/* ---------- редактор */
.ww-ed .ww-wall canvas { aspect-ratio: 600 / 470; touch-action: none; cursor: crosshair; }
.ww-sign { position: absolute; left: 50%; top: 2.2%; transform: translateX(-50%) rotate(-1.5deg); max-width: 84%; padding: 4px 14px 5px; text-align: center;
  background: #f7f4ea; border: 2.5px solid var(--blue); border-radius: 7px; box-shadow: 0 0 0 2px var(--ink), 0 3px 0 2px rgba(58,36,24,.55); pointer-events: none; }
.ww-sign::before, .ww-sign::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #8e9aa3; box-shadow: inset 0 -1px 0 rgba(0,0,0,.4); }
.ww-sign::before { left: 4px; } .ww-sign::after { right: 4px; }
.ww-sign small { display: block; font: 800 8.5px/1 Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ww-sign b { display: block; font: 900 12.5px/1.15 Unbounded, sans-serif; color: var(--blue); margin-top: 2px; }
.ww-sign.long b { font-size: 10.5px; }
.ww-hint { min-height: 34px; margin: 10px 4px 0; font: 700 12.5px/1.3 Manrope, sans-serif; color: #fff8e6; text-shadow: 0 1px 0 rgba(0,0,0,.35); text-align: center; transition: opacity .3s; }
.ww-hint.fade { opacity: 0; }
.ww-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ww-brushes { display: flex; gap: 3px; padding: 3px; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink);
  background: var(--tile) linear-gradient(var(--grout) 1px, transparent 1px) 0 0 / 14px 14px; }
.ww-brushes button { width: 58px; height: 52px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 800 10px/1 Manrope, sans-serif; color: var(--ink-2); }
.ww-brushes button i { display: block; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a06838, var(--paint) 60%, #3b1d0a); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.ww-brushes button.on { background: linear-gradient(#ffe7a8, #f2c45a); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.ww-paint { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); height: 58px; }
.ww-paint .ww-ic { width: 34px; height: 34px; position: relative; }
.ww-paint .lvl { position: absolute; left: 22%; right: 22%; bottom: 14%; border-radius: 0 0 4px 4px; background: linear-gradient(#8a5128, var(--paint)); transition: height .2s; }
.ww-paint .tx { min-width: 0; }
.ww-paint small { display: block; font: 800 10px/1 Manrope, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.ww-paint b { display: block; font: 900 17px/1.1 Unbounded, sans-serif; margin-top: 3px; }
.ww-paint.low b { color: var(--red-d); }
.ww-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ww-submit { width: 100%; margin-top: 14px; }
.ww-stamp { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-9deg); padding: 6px 14px; border: 4px solid currentColor; border-radius: 9px;
  font: 900 19px/1.05 Unbounded, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--red); background: rgba(255,250,240,.82); text-align: center;
  pointer-events: none; animation: wwStamp .45s cubic-bezier(.2,1.4,.4,1) both; white-space: nowrap; }
.ww-stamp.blue { color: var(--blue); } .ww-stamp.green { color: #2f7a43; } .ww-stamp.gold { color: #a8771a; }
@keyframes wwStamp { from { transform: translate(-50%, -50%) rotate(-9deg) scale(2.4); opacity: 0; } }
.ww-note { margin-top: 12px; padding: 10px 12px; border: 2px dashed #b89a72; border-radius: 12px; background: rgba(251,243,225,.92); font: 700 13.5px/1.35 Manrope, sans-serif; text-align: center; }
.ww-shake { animation: wwShake .4s; }
@keyframes wwShake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---------- голосование */
.ww-hearts { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); flex: none; }
.ww-hearts .ww-ic { width: 24px; height: 24px; color: var(--red); }
.ww-hearts b { font: 900 18px/1 Unbounded, sans-serif; }
.ww-hearts small { display: block; font: 800 9.5px/1 Manrope, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.ww-deck { position: relative; touch-action: pan-y; }
.ww-card { position: relative; will-change: transform; transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .28s; }
.ww-card.drag { transition: none; }
.ww-num { position: absolute; left: 10px; top: 10px; z-index: 2; font: 900 10.5px/1 Unbounded, sans-serif; padding: 5px 8px; border-radius: 8px; background: rgba(43,26,18,.8); color: #fff1d6; }
.ww-lab { position: absolute; top: 18px; z-index: 3; padding: 5px 10px; border: 3px solid currentColor; border-radius: 8px; font: 900 15px/1 Unbounded, sans-serif;
  background: rgba(255,250,240,.9); opacity: 0; pointer-events: none; }
.ww-lab.l { right: 14px; color: var(--ink-2); transform: rotate(8deg); }
.ww-lab.r { left: 14px; color: var(--red); transform: rotate(-8deg); }
.ww-burst { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; z-index: 4; color: var(--red); pointer-events: none; animation: wwBurst .8s ease-out forwards; }
.ww-burst svg { width: 100%; height: 100%; }
@keyframes wwBurst { 0% { transform: scale(.2); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5) translateY(-30px); opacity: 0; } }
.ww-mine { position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; align-items: center; gap: 4px; font: 900 10px/1 Unbounded, sans-serif; padding: 4px 8px; border-radius: 8px; background: #ffe3dc; border: 2px solid var(--ink); color: var(--red-d); }
.ww-mine .ww-ic { width: 14px; height: 14px; }
.ww-vbtns { display: grid; grid-template-columns: 1fr 76px 1fr; align-items: center; gap: 12px; margin-top: 18px; }
.ww-heartbtn { width: 76px; height: 76px; border-radius: 50%; padding: 15px; color: #fff; justify-self: center;
  background: radial-gradient(circle at 35% 30%, #ff8a70, var(--red) 55%, var(--red-d)); border: 3px solid var(--ink) !important; box-shadow: 0 5px 0 var(--ink), 0 0 0 5px rgba(255,255,255,.6); transition: transform .08s; }
.ww-heartbtn:active:not(:disabled) { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 var(--ink), 0 0 0 5px rgba(255,255,255,.6); }
.ww-heartbtn:disabled { filter: grayscale(.9); opacity: .5; }
.ww-heartbtn svg path { stroke: #3a2418; }
.ww-vbtns .ww-btn { min-height: 52px; }
.ww-sub2 { margin-top: 12px; font: 700 12.5px/1.35 Manrope, sans-serif; color: #fff8e6; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* ---------- топ */
.ww-gold { position: relative; padding: 14px; border-radius: 10px; border: 2.5px solid var(--ink);
  background: linear-gradient(135deg, #f9de8c, #d9a53b 30%, #fbe7a4 50%, #c98e2b 72%, #f5d27a); box-shadow: 0 6px 0 rgba(30,20,12,.6), inset 0 0 0 3px rgba(255,255,255,.35), inset 0 0 0 7px rgba(120,80,20,.35); }
.ww-gold .ww-wall { border-width: 2px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 0 0 3px rgba(120,80,20,.5); }
.ww-gold .ww-wall::after { border-radius: 3px; }
.ww-crown { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 46px; height: 34px; }
.ww-label { position: relative; margin: -6px auto 0; width: max-content; max-width: 92%; padding: 9px 16px 10px; text-align: center; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 0 4px 0 var(--ink); transform: rotate(-1deg); }
.ww-label b { display: block; font: 900 15px/1.15 Unbounded, sans-serif; word-break: break-all; }
.ww-label small { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; font: 800 12px/1 Manrope, sans-serif; color: var(--ink-2); }
.ww-label .stamp { font: 900 9.5px/1 Unbounded, sans-serif; text-transform: uppercase; color: var(--red); border: 2px solid currentColor; border-radius: 5px; padding: 2px 5px; transform: rotate(-4deg); }
.ww-list { margin-top: 20px; padding: 6px 12px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 rgba(30,20,12,.6); }
.ww-tr { display: grid; grid-template-columns: 30px 96px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #d4bd96; }
.ww-tr:last-child { border-bottom: 0; }
.ww-tr .pl { font: 900 15px Unbounded, sans-serif; text-align: center; }
.ww-tr canvas { width: 96px; height: 64px; border: 2px solid var(--ink); border-radius: 6px; display: block; }
.ww-tr .nk { font-weight: 900; word-break: break-all; font-size: 14px; }
.ww-tr .hs { display: flex; align-items: center; gap: 3px; font: 900 13px Unbounded, sans-serif; }
.ww-tr .hs .ww-ic { width: 16px; height: 16px; color: var(--red); }
.ww-tr.p2 .pl { color: #7f8a96; } .ww-tr.p3 .pl { color: #a8672f; }

/* ---------- проверка */
.ww-q { margin-bottom: 18px; padding: 10px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 rgba(30,20,12,.6); transition: opacity .4s, transform .4s, max-height .45s, margin .45s, padding .45s; max-height: 900px; overflow: hidden; }
.ww-q.out { opacity: 0; transform: scale(.96); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.ww-q .ww-wall { box-shadow: none; }
.ww-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 9px 2px 0; font: 700 12.5px/1.3 Manrope, sans-serif; color: var(--ink-2); }
.ww-meta b { color: var(--ink); font-weight: 900; }
.ww-verd { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.ww-verd .ww-btn { min-height: 46px; font-size: 11.5px; }
.ww-verd .ww-btn.red { grid-column: 1 / -1; }

.ww-toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 84px); z-index: 90; transform: translate(-50%, -16px); opacity: 0; transition: .25s; pointer-events: none;
  width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; background: var(--ink); color: #fff3d6; border-radius: 12px; font: 800 14px/1.3 Manrope, sans-serif; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.ww-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 370px) {
  .ww-brushes button { width: 52px; }
  .ww-paint b { font-size: 15px; }
  .ww-btn { font-size: 11px; }
}
.ww-heartbtn .ww-ic { width: 100%; height: 100%; }
.ww-btn.small { min-height: 40px; font-size: 11.5px; padding: 6px 12px; border-radius: 11px; box-shadow: 0 3px 0 var(--ink); }
.ww-rules { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 9px 11px; border: 2.5px solid var(--ink); border-radius: 12px;
  background: #fff3c4; box-shadow: 0 3px 0 var(--ink); font: 800 12px/1.35 Manrope, sans-serif; }
.ww-rules b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 900 12px/1 Unbounded, sans-serif; margin-top: 1px; }
.ww { --paint: #4b2711; }