:root{
  --accent:#D95B2E; --accent-deep:#B8461E; --accent-soft:#FBE9E0; --ink:#243228; --muted:#5C6B5D;
  --good:#2A7942; --good-soft:#E3F2E6; --bad:#C0392B; --bad-soft:#FBE7E4;
  --bg:#F3F7EF; --surface:#FFFFFF; --line:#DBE4D6;
  --board:#E7DCC4; --board-edge:#B98B54; --board-edge2:#8A6A4B;
  /* Lišta: tmavší než --accent kvůli kontrastu bílého textu (WCAG AA, viz audit bod 19) */
  --appbar:linear-gradient(180deg,#C14F24,#B8461E);
  /* Kolečka kroků 1-2-3: bílý text na --accent dává jen 3,8:1, tohle 4,7:1 (WCAG AA) */
  --accent-step:#C94B1E;
  --radius:14px; --cardsh:0 6px 16px rgba(30,40,25,.14);
  --display:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
/* Vlastní SVG ikony (app/icons.js): velikost podle písma okolí, ať sedí v tlačítku i na políčku */
.ico-svg{width:1.3em;height:1.3em;vertical-align:-.3em;display:inline-block;flex:0 0 auto}
.iconbtn .ico-svg{width:1.45em;height:1.45em;vertical-align:-.35em}
/* Nastavení je ovládání stánku, ne funkce pro hráče. Na širokém displeji zůstává
   popsané slovem (obsluha ho musí najít), na mobilu se smrskne na ozubené kolo,
   ať hlavička nepatří ze čtvrtiny tlačítku, které dítě stejně nemá otevírat. */
#btn-settings .set-ico{display:none;width:1.4em;height:1.4em;vertical-align:-.3em}
@media (max-width:640px){
  #btn-settings .set-ico{display:inline-block}
  #btn-settings .set-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #btn-settings{padding-left:12px;padding-right:12px;min-width:44px}
  #btn-sound{min-width:44px}
}
.cell span .ico-svg{width:1.05em;height:1.05em;vertical-align:middle;display:block}
.cell:not(.set):not(.parcel) span .ico-svg{width:1.55em;height:1.55em;filter:drop-shadow(0 1px 1px rgba(255,255,255,.55))}
.cell.set span:first-child{display:flex;align-items:center;justify-content:center}
.chip .ico-svg{width:1.45em;height:1.45em}
.bd .ico .ico-svg{width:28px;height:28px}
.rb-ico .ico-svg{width:36px;height:36px}
.coach #coach-ico .ico-svg{width:1.6em;height:1.6em}
.maplegend .zmark .ico-svg{width:12px;height:12px}
.zmark .ico-svg{width:14px;height:14px;display:block}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;
  /* kiosk: žádné „přetažení" stránky prstem ani zoom dvojím ťuknutím (posun a pinch zůstávají) */
  overscroll-behavior:none;touch-action:manipulation}
button,.cell,.chip,.optcard{touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
button{font:inherit;cursor:pointer}
a{color:var(--accent)} a:hover{color:var(--accent-deep)}

.appbar{display:flex;align-items:center;gap:14px;color:#fff;padding:10px 20px;font-weight:700;
  background:var(--appbar);
  box-shadow:0 3px 0 rgba(0,0,0,.12),0 6px 16px rgba(180,70,30,.28);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:12px}
button.brand{background:none;border:none;padding:0;color:#fff;cursor:pointer;min-height:44px}
button.brand:active{transform:scale(.97)}
.logo-mark{width:44px;height:44px;display:grid;place-items:center;background:rgba(255,255,255,.16);
  border-radius:13px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);transform:rotate(-3deg)}
.logo-mark svg{display:block}
.brand-text{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:.2px;line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.14)}
.brand-text b{font-weight:800;color:#FFF3DC}
#appbar-info{flex:1;font-weight:600;font-size:14px;opacity:.92;padding-left:4px}
/* Tmavý překryv místo světlého: bílý 15px text na liště musí mít kontrast aspoň 4,5:1 */
button.ghost{background:rgba(0,0,0,.08);border:2px solid rgba(255,255,255,.6);color:#fff;
  border-radius:999px;padding:9px 18px;font-weight:800;font-size:15px;min-height:48px}
button.ghost:active{transform:translateY(1px);background:rgba(0,0,0,.16)}

main{max-width:1180px;margin:0 auto;padding:20px 20px 40px}
.view{display:none}
.view.active{display:block;animation:muViewIn .34s cubic-bezier(.22,1,.36,1)}
@keyframes muViewIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
h2{font-family:var(--display);font-size:30px;margin:8px 0 4px;font-weight:800}
h3{font-size:14px;margin:20px 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.muted{color:var(--muted);font-size:15px;min-height:1.4em;margin:10px 2px}

.optrow{display:flex;flex-wrap:wrap;gap:12px}
.optcard{background:var(--surface);border:2.5px solid var(--line);border-radius:16px;
  padding:14px 22px;font-weight:800;font-size:17px;min-height:56px;color:var(--ink);
  box-shadow:0 3px 0 rgba(30,40,25,.07);transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}
.optcard:active{transform:translateY(2px);box-shadow:none}
.optcard.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);
  box-shadow:0 4px 0 var(--accent),0 8px 16px rgba(217,91,46,.22)}
.optcard:disabled{opacity:.32;box-shadow:none}
.optcard.lockd{opacity:.55;border-style:dashed;box-shadow:none}
.unlock-note{max-width:640px;margin:8px auto 0;font-size:14px}
.unlock-note.pulse{animation:mu-level-pop .5s}
.linkbtn{font:inherit;font-weight:800;color:var(--accent-deep);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;min-height:0}
.collection{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}
.col-b{display:flex;flex-direction:column;align-items:center;gap:2px;width:84px;padding:8px 4px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:11px;text-align:center}
.col-b i{font-style:normal;font-size:26px;line-height:1;display:block} .col-b i svg{width:28px;height:28px}
.col-b small{color:var(--muted);line-height:1.2}
.col-b.locked{opacity:.5;border-style:dashed} .col-b.locked i{filter:grayscale(1)}
.optcard .season-tag{display:block;font-size:11px;font-weight:800;color:var(--accent-deep);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.switchrow{display:inline-flex;align-items:center;gap:12px;margin:24px 2px;font-weight:700;font-size:16px;
  background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:12px 18px;min-height:52px}
.switchrow input{width:26px;height:26px;accent-color:var(--accent)}
.btnrow{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.cta{flex:1;color:#fff;border:none;border-radius:16px;padding:16px 24px;font-weight:800;font-size:19px;
  min-height:60px;font-family:var(--display);letter-spacing:.2px;
  /* bílé písmo: #E4682F mělo jen 3,3:1, na telefonu (16,5px) je potřeba 4,5:1 */
  background:linear-gradient(180deg,#C94B1E,#B8461E);
  box-shadow:0 5px 0 var(--accent-deep),0 10px 20px rgba(180,70,30,.3)}
.cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-deep)}
.cta:disabled{opacity:.4;box-shadow:0 5px 0 var(--accent-deep)}
button.ghost.danger{background:#fff;border:2px solid var(--bad);color:var(--bad);box-shadow:0 3px 0 rgba(192,57,43,.25)}
#view-settings button.ghost{background:#fff;border:2px solid var(--line);color:var(--muted);box-shadow:0 3px 0 rgba(30,40,25,.07)}
#view-settings button.ghost.danger{border-color:var(--bad);color:var(--bad)}
/* ghost tlačítka na světlých obrazovkách: bílý text lišty by tu nebyl vidět */
#view-result .ghost,#view-ops .ghost,#view-lb .ghost,#view-input .ghost{background:#fff;border:2px solid var(--line);color:var(--muted);box-shadow:0 3px 0 rgba(30,40,25,.07)}
#btn-undo{margin:0 0 10px;align-self:flex-start;color:var(--accent-deep);border-color:var(--accent)}
#btn-undo:disabled{opacity:.45;box-shadow:none}
#btn-undo[hidden]{display:none}
#view-ops .ghost.danger{border-color:var(--bad);color:var(--bad)}

.inputhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 6px}
#input-title{font-family:var(--display);font-weight:800;font-size:20px}
.moves{background:#fff;color:var(--accent-deep);font-weight:800;padding:8px 16px;border-radius:999px;
  font-size:15px;border:2px solid var(--accent);box-shadow:0 3px 0 rgba(217,91,46,.18)}

.boardframe{background:var(--board);border:7px solid var(--board-edge);border-radius:20px;padding:12px;
  box-shadow:0 3px 0 var(--board-edge2),0 12px 28px rgba(30,40,25,.2),inset 0 0 0 2px rgba(255,255,255,.25);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(239%2C230%2C212)'%2F%3E%3Cg%20stroke%3D'rgb(228%2C216%2C193)'%20stroke-width%3D'1'%3E%3Cline%20x1%3D'0'%20y1%3D'20'%20x2%3D'100'%20y2%3D'22'%2F%3E%3Cline%20x1%3D'0'%20y1%3D'55'%20x2%3D'100'%20y2%3D'52'%2F%3E%3Cline%20x1%3D'0'%20y1%3D'84'%20x2%3D'100'%20y2%3D'86'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:120px 120px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cell{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-size:clamp(18px,3vw,26px);border:none;padding:0;line-height:1.05;
  background-size:100% 100%;background-repeat:no-repeat;position:relative;overflow:hidden}
.cell small{font-size:clamp(9px,1.4vw,12px);font-weight:800}

.cell.parcel{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(234%2C243%2C226)'%2F%3E%3Cg%20fill%3D'rgb(199%2C218%2C183)'%3E%3Ccircle%20cx%3D'22'%20cy%3D'24'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'20'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'78'%20cy%3D'26'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'52'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'68'%20cy%3D'50'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'78'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'82'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'76'%20r%3D'2.4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");box-shadow:inset 0 0 0 3px rgba(150,180,130,.9);color:#5b7051}
.cell.parcel small{background:rgba(255,255,255,.72);padding:2px 8px;border-radius:999px;letter-spacing:.04em;
  text-transform:uppercase;font-size:10px}
.cell.parcel.sel,.cell.set.sel{box-shadow:inset 0 0 0 4px var(--accent),0 0 0 3px rgba(217,91,46,.35)}
.cell.set.sel{animation:muGlow 1.1s ease-in-out infinite;z-index:3}
@keyframes muGlow{
  0%,100%{box-shadow:inset 0 0 0 4px var(--accent),0 0 0 3px rgba(217,91,46,.35)}
  50%{box-shadow:inset 0 0 0 4px var(--accent),0 0 0 9px rgba(217,91,46,.4),0 0 26px 8px rgba(232,120,60,.65)}}
.cell.parcel.sel{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(234%2C243%2C226)'%2F%3E%3Cg%20fill%3D'rgb(199%2C218%2C183)'%3E%3Ccircle%20cx%3D'22'%20cy%3D'24'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'20'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'78'%20cy%3D'26'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'52'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'68'%20cy%3D'50'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'78'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'82'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'76'%20r%3D'2.4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-color:var(--accent-soft)}

.cell.set{background:#fff;box-shadow:var(--cardsh),inset 0 0 0 2px var(--good);color:var(--good);
  border-top:5px solid var(--good)}
.cell.confirm{outline:3px solid #C0392B;outline-offset:-3px}
.cell.set span:first-child{font-size:clamp(22px,3.4vw,30px);filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.cell.set small{color:#2b4a34}
.cell.mu-pop{animation:muPop .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes muPop{0%{transform:scale(.4) translateY(-14px);opacity:0}
  60%{transform:scale(1.08) translateY(2px)}100%{transform:none;opacity:1}}

.cell.f-road{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(120%2C128%2C138)'%2F%3E%3Crect%20x%3D'0'%20width%3D'9'%20height%3D'100'%20fill%3D'rgb(152%2C159%2C168)'%2F%3E%3Crect%20x%3D'91'%20width%3D'9'%20height%3D'100'%20fill%3D'rgb(152%2C159%2C168)'%2F%3E%3Cline%20x1%3D'50'%20y1%3D'-4'%20x2%3D'50'%20y2%3D'104'%20stroke%3D'rgb(245%2C241%2C229)'%20stroke-width%3D'4'%20stroke-dasharray%3D'15%2013'%2F%3E%3C%2Fsvg%3E")}
.cell.f-road_main{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(85%2C92%2C101)'%2F%3E%3Crect%20y%3D'0'%20height%3D'9'%20width%3D'100'%20fill%3D'rgb(112%2C119%2C128)'%2F%3E%3Crect%20y%3D'91'%20height%3D'9'%20width%3D'100'%20fill%3D'rgb(112%2C119%2C128)'%2F%3E%3Cline%20x1%3D'-4'%20y1%3D'50'%20x2%3D'104'%20y2%3D'50'%20stroke%3D'rgb(247%2C205%2C88)'%20stroke-width%3D'4.5'%20stroke-dasharray%3D'17%2013'%2F%3E%3C%2Fsvg%3E")}
.cell.f-water{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(126%2C179%2C220)'%2F%3E%3Cpath%20d%3D'M-8%2026%20q14%20-10%2028%200%20t28%200%20t28%200%20t28%200'%20stroke%3D'rgb(165%2C203%2C232)'%20stroke-width%3D'6'%20fill%3D'none'%2F%3E%3Cpath%20d%3D'M-8%2055%20q14%20-10%2028%200%20t28%200%20t28%200%20t28%200'%20stroke%3D'rgb(232%2C243%2C251)'%20stroke-width%3D'4.5'%20fill%3D'none'%20opacity%3D'0.75'%2F%3E%3Cpath%20d%3D'M-8%2082%20q14%20-10%2028%200%20t28%200%20t28%200%20t28%200'%20stroke%3D'rgb(165%2C203%2C232)'%20stroke-width%3D'5'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");color:#1f4467}
.cell.f-square{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(228%2C213%2C184)'%2F%3E%3Cg%20stroke%3D'rgb(205%2C189%2C158)'%20stroke-width%3D'2'%20fill%3D'none'%3E%3Cpath%20d%3D'M0%2025H100%20M0%2050H100%20M0%2075H100'%2F%3E%3Cpath%20d%3D'M25%200V25%20M75%200V25%20M50%2025V50%20M25%2050V75%20M75%2050V75%20M50%2075V100%20M0%2025V50%20M100%2025V50'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");color:#7a6238}
.cell.f-park,.cell.f-green{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(140%2C194%2C114)'%2F%3E%3Cg%20stroke%3D'rgb(108%2C166%2C84)'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20fill%3D'none'%3E%3Cpath%20d%3D'M18%2040%20l-4%20-11%20M18%2040%20l0%20-13%20M18%2040%20l4%20-11'%2F%3E%3Cpath%20d%3D'M62%2030%20l-4%20-11%20M62%2030%20l0%20-13%20M62%2030%20l4%20-11'%2F%3E%3Cpath%20d%3D'M40%2078%20l-4%20-11%20M40%2078%20l0%20-13%20M40%2078%20l4%20-11'%2F%3E%3Cpath%20d%3D'M82%2066%20l-4%20-10%20M82%2066%20l0%20-12%20M82%2066%20l4%20-10'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'78'%20cy%3D'24'%20r%3D'9'%20fill%3D'rgb(88%2C148%2C73)'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'74'%20r%3D'8'%20fill%3D'rgb(88%2C148%2C73)'%2F%3E%3C%2Fsvg%3E");color:#274023}
.cell.f-castle{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20width%3D'100'%20height%3D'100'%20fill%3D'rgb(153%2C161%2C170)'%2F%3E%3Cg%20stroke%3D'rgb(130%2C138%2C148)'%20stroke-width%3D'2.5'%20fill%3D'none'%3E%3Cpath%20d%3D'M0%2033H100%20M0%2066H100'%2F%3E%3Cpath%20d%3D'M33%200V33%20M66%200V33%20M16%2033V66%20M50%2033V66%20M84%2033V66%20M33%2066V100%20M66%2066V100'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");color:#39404b}
.cell.f-rail{background:#B9AFA3}
.cell.f-station{background:#D8C9A8}
.cell.f-water span,.cell.f-square span,.cell.f-park span,.cell.f-green span,.cell.f-castle span{
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.6))}
.cell.locked{pointer-events:none;opacity:.85}
.cell.fixed{box-shadow:var(--cardsh),inset 0 0 0 2px #9AA79A;color:#5b7051}
.cell.fixed .pnum::after{content:' 🔒';font-size:.8em}
.pnum{position:absolute;top:4px;left:5px;font-style:normal;font-weight:800;font-size:11px;
  line-height:1;background:rgba(255,255,255,.85);color:#5b7051;padding:3px 6px;border-radius:999px;
  box-shadow:0 1px 2px rgba(30,40,25,.15);z-index:2}
.cell.set .pnum{color:var(--good)}
/* Zóna mapy (památková, u kolejí): čárkovaný rámeček + ikona v rohu, stejně jako na tištěném
   plánu; drží i na parcele s budovou. Směr proudu řeky: šipka v rohu vodního políčka. */
.cell.zone::before{content:"";position:absolute;inset:3px;border:2.5px dashed #B48A3C;border-radius:8px;
  pointer-events:none;z-index:1}
.zmark{position:absolute;top:3px;right:4px;font-style:normal;font-size:12px;line-height:1;z-index:2;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.8))}
.flow{position:absolute;right:4px;bottom:3px;font-style:normal;font-weight:800;font-size:13px;line-height:1.2;
  color:#163a5c;background:rgba(255,255,255,.78);border-radius:6px;padding:1px 5px;z-index:2}
.maplegend .cell.zone::before{inset:2px;border-width:2px;border-radius:5px}
.maplegend .zmark{top:1px;right:2px;font-size:10px}

/* paleta a Vyhodnotit v jednom sloupci: tlačítko drží plnou šířku i na telefonu */
.playside{display:flex;flex-direction:column}
.palette{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.chip{border:2.5px solid var(--line);background:#fff;border-radius:14px;padding:10px 16px;font-size:15px;
  font-weight:800;min-height:52px;display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 3px 0 rgba(30,40,25,.08);transition:transform .12s,box-shadow .12s}
.chip:active{transform:translateY(2px);box-shadow:none}
.chip.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);
  box-shadow:0 4px 0 var(--accent),0 8px 14px rgba(217,91,46,.22)}
.chip.used{opacity:.4;text-decoration:line-through;box-shadow:none}
.chip .cnt{font-style:normal;font-weight:800;font-size:.78em;color:inherit;margin-left:.35em}
.chip .price{font-style:normal;font-size:.72em;font-weight:700;opacity:.65;margin-left:.4em;white-space:nowrap}
.price.over{color:var(--bad)}

.scorebox{text-align:center;padding:16px 0 4px}
.score-line{display:flex;align-items:baseline;justify-content:center;gap:6px}
.big{font-family:var(--display);font-size:76px;font-weight:800;line-height:.9;color:var(--accent);
  text-shadow:0 3px 0 rgba(217,91,46,.18)}
.of{font-size:19px;color:var(--muted);font-weight:700}
.badge{display:inline-block;margin-top:14px;background:var(--good);color:#fff;font-weight:800;font-size:17px;
  padding:9px 22px;border-radius:999px;font-family:var(--display);box-shadow:0 4px 0 rgba(46,125,70,.4);
  opacity:0;transition:opacity .3s}
.badge:not(:empty){opacity:1}
#res-spent{display:block;margin-top:4px}
.meter{height:18px;background:#e6ece1;border-radius:999px;margin:20px auto 6px;max-width:520px;overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(30,40,25,.14)}
.meter i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#E8A13C,#5FB56A,var(--good));background-size:200% 100%;
  transition:width .8s cubic-bezier(.22,1,.36,1)}

.breakdown{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:6px 8px;
  margin:20px auto 16px;max-width:640px;box-shadow:0 4px 14px rgba(30,40,25,.08)}
.bd{display:flex;gap:12px;align-items:center;padding:12px 12px;border-top:1.5px solid var(--line);font-size:16px}
.bd:first-child{border-top:none}
.bd .ico{font-size:26px;flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  background:var(--bg)}
.bd .pts{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;font-size:17px;
  padding:6px 12px;border-radius:999px;min-width:56px;text-align:center;flex:0 0 auto}
.bd .pts.plus{color:var(--good);background:var(--good-soft)}
.bd .pts.minus{color:var(--bad);background:var(--bad-soft)}

.lb-entry{display:flex;gap:12px;margin:16px auto;max-width:640px}
.lb-entry input{flex:1;border:2.5px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;
  font-size:17px;min-height:54px}
.lb-entry input:focus{border-color:var(--accent);outline:3px solid rgba(217,91,46,.4);outline-offset:2px}
.lb-entry button{background:#fff;border:2.5px solid var(--accent);color:var(--accent-deep);border-radius:14px;
  font-weight:800;padding:0 22px;min-height:54px;box-shadow:0 3px 0 rgba(217,91,46,.2)}
.lb-entry button:active{transform:translateY(2px);box-shadow:none}
.lb-entry button:disabled{opacity:.45;box-shadow:none}
.lb{background:var(--accent-soft);border-radius:18px;padding:16px 20px;margin:16px auto;max-width:640px;
  border:2px solid #f2d3c4}
.lb b{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);
  display:block;margin-bottom:6px}
.lb .row{display:flex;justify-content:space-between;font-size:16px;padding:7px 0;border-top:1px solid #f2d3c4;
  font-variant-numeric:tabular-nums}
.lb .row:first-of-type{border-top:none}
.lb .row.me{font-weight:800;color:var(--accent-deep)}
/* hodnocení po výsledku */
.rating{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;
  margin:14px auto 0;max-width:640px;padding:12px 16px;background:#fff;border:2px solid var(--line);border-radius:18px}
.rating-q{font-weight:700;color:var(--ink)}
.rating-btns{display:flex;gap:8px}
.rating-btns{gap:4px}
.rating-btn{min-width:48px;min-height:48px;padding:0;border-radius:12px;background:transparent;border:2px solid transparent;
  cursor:pointer;transition:transform .12s;display:grid;place-items:center}
.rating-btn .ico-svg{width:34px;height:34px;filter:grayscale(1) opacity(.45);transition:filter .12s}
.rating-btn:hover:not(:disabled){transform:scale(1.12)}
.rating-btn:hover:not(:disabled) .ico-svg{filter:none}
/* najetím se rozsvítí i všechny hvězdy před ní */
.rating-btns:hover .rating-btn:not(:disabled) .ico-svg{filter:none}
.rating-btns:hover .rating-btn:not(:disabled):hover ~ .rating-btn .ico-svg{filter:grayscale(1) opacity(.45)}
.rating-btn:disabled{cursor:default}
.rating-btn.sel .ico-svg{filter:none}
.rating-btn:focus-visible{outline:3px solid rgba(217,91,46,.45);outline-offset:2px}
.rating-thanks{color:var(--good);font-weight:700}
.rating-more{flex-basis:100%;text-align:center;font-size:13.5px;color:var(--muted);display:flex;align-items:center;justify-content:center;min-height:44px}
.rating.done .rating-q{display:none}
.rating-why{flex-basis:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.rating-why[hidden],.rating-why [hidden]{display:none}
.rating-why-q{font-weight:700;color:var(--ink)}
.rating-why-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rating-why .chip{min-height:44px}
.rating-why .chip:disabled:not(.sel){opacity:.55}
.rating-why .chip.sel{background:var(--accent-soft,#FBE3D6);border-color:var(--accent-deep);color:var(--accent-deep)}
/* 1 a 2 hvězdičky: otázka i volby větší, ať důvod nezapadne (z 8 jedniček řeklo proč jediné dítě) */
.rating-why.low .rating-why-q{font-size:18px;color:var(--accent-deep)}
.rating-why.low .chip{font-size:16px;padding:12px 18px;border-color:var(--accent)}
/* nejlepší výsledky na domovské obrazovce */
.my-best{margin:18px auto 0;max-width:640px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 16px;text-align:center}
.my-best b{display:block;margin-bottom:8px}
.my-best-rows{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center}
.my-best-row{display:inline-flex;align-items:center;gap:6px;background:var(--bg,#FDF6EC);border-radius:999px;padding:4px 12px;font-size:14px}
.my-best-row .mb-pct{color:var(--accent-deep);font-size:15px}
:root[data-apple] .my-best{border-width:1px;box-shadow:var(--cardsh)}
/* Cesta starosty: hlavní cesta pro dítě doma, proto výraznější než ostatní tlačítka v řadě */
.home-row .ghost.levels-btn{border:2px solid var(--accent);color:var(--accent-deep);font-weight:900}
:root[data-apple] .home-row .ghost.levels-btn{background:var(--accent-soft);border:none}
/* dvojice u jednoho zařízení */
.pairrow{margin-top:10px}
.moves.pair{background:var(--accent-soft);color:var(--accent-deep);border:2px solid var(--accent-deep)}
.moves.pair.p2{background:#E3EEF8;color:#1F5A8A;border-color:#1F5A8A}
.homework{background:var(--good-soft,#E3F2E6)}
/* kód třídy */
.class-chip{margin:14px auto 0;max-width:640px;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:center;
  background:var(--accent-soft);border-radius:999px;padding:8px 16px;font-size:14.5px}
.class-chip[hidden]{display:none}
.class-chip b{letter-spacing:.08em}
.linkbtn{background:none;border:0;padding:4px 8px;color:var(--accent-deep);font:inherit;font-weight:800;cursor:pointer;text-decoration:underline;min-height:32px}
.class-input{font:inherit;font-size:28px;letter-spacing:.3em;text-transform:uppercase;text-align:center;width:100%;padding:10px;border:2px solid var(--line);border-radius:12px;margin:8px 0}
/* odznaky */
.badge-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg,#FDF6EC);border-radius:999px;padding:4px 12px;font-size:13.5px;color:var(--muted)}
.badge-chip.ok{background:var(--good-soft,#E3F2E6);color:var(--good);font-weight:800}
.badge-chip .badge-ico{width:1.1em;height:1.1em}
.badge-dots{font-style:normal;font-size:11px;letter-spacing:1px;color:var(--accent-deep)}
/* cesta starosty */
.levels-lede{max-width:60ch;margin:0 0 14px}
.levels-list{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:0 auto}
.lv{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;width:100%;background:#fff;border:2px solid var(--line);
  border-radius:16px;padding:10px 14px;font:inherit;color:var(--ink);cursor:pointer;min-height:56px}
.lv:disabled{opacity:.55;cursor:default}
.lv.done{border-color:var(--good)} .lv.open{border-color:var(--accent)}
.lv-n{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;display:grid;place-items:center}
.lv.done .lv-n{background:var(--good)} .lv.locked .lv-n{background:#B7B1A6}
.lv-body b{display:block;font-size:16px} .lv-body small{color:var(--muted);font-size:13px;line-height:1.35;display:block}
.lv-state{font-weight:800;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.lv.done .lv-state{color:var(--good)} .lv-ico{width:1.1em;height:1.1em}
.levels-h{grid-column:1/-1;margin:14px 0 2px;font-size:17px}
.levels-h small{display:block;font-weight:600;color:var(--muted);font-size:13px}
.lv.master .lv-n{background:linear-gradient(180deg,#8A6A12,#6E540C)}
.levels-code{max-width:640px;margin:22px auto 0;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 16px}
.levels-code b{display:block;margin-bottom:4px} .levels-code code{font-size:20px;letter-spacing:.2em;color:var(--accent-deep);font-weight:900}
.levels-code .btnrow{justify-content:flex-start}
.shared-banner.level-ok{background:var(--good-soft,#E3F2E6);color:var(--good);border-color:var(--good);animation:mu-level-pop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes mu-level-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.shared-banner.level-ok{animation:none}}
.shared-banner.level-no{background:var(--bad-soft,#FBE7E4);color:var(--bad);border-color:var(--bad)}
:root[data-apple] .lv{border-width:1px;box-shadow:var(--cardsh)}
/* správná řešení v Nastavení */
.solrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.solrow select{font:inherit;padding:8px 10px;border:2px solid var(--line);border-radius:10px;background:#fff;min-height:44px}
.sol-grid{display:grid;gap:3px;max-width:420px;margin:8px 0}
.sol-grid .c{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;font-size:11px;position:relative;background:#EDE6D6}
.sol-grid .c .ico-svg{width:70%;height:70%}
.sol-grid .c.parcel{background:#F6F1E4;border:1px dashed #CFC6B2}
.sol-grid .c.road,.sol-grid .c.road_main{background:#5B6470} .sol-grid .c.road_main{background:#434B57}
.sol-grid .c.water{background:#8FC3DF} .sol-grid .c.green,.sol-grid .c.park{background:#8FC37E}
.sol-grid .c.square{background:#E2C78F} .sol-grid .c.castle{background:#9AA2AB} .sol-grid .c.rail,.sol-grid .c.station{background:#B9AFA3}
.sol-grid .c.built{background:#fff;border:2px solid var(--good)}
:root[data-apple] .rating{border-width:1px;box-shadow:var(--cardsh)}
:root[data-apple] .rating-btn{border-width:1px}
/* odznak titulu podle úrovně: kontrast bílého písma nad 4,5:1 u všech */
.badge[data-uroven="zednik"]{background:#6B6258}
.badge[data-uroven="stavitel"]{background:#9A5B12}
.badge[data-uroven="starosta"]{background:var(--good)}
.badge[data-uroven="architekt"]{background:linear-gradient(180deg,#8A6A12,#6E540C)}
/* rada nad rozpisem výsledku */
.res-tip{max-width:640px;margin:14px auto 0;padding:12px 16px;border-radius:14px;font-weight:700;font-size:15.5px;line-height:1.45}
.res-tip.minus{background:var(--bad-soft);color:#9B2E22}
.res-tip.plus{background:var(--good-soft);color:var(--good)}
/* hláška, když se hra nenačetla celá (app/index.html) */
#load-fail{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(30,40,25,.45)}
#load-fail .lf-card{background:var(--surface);color:var(--ink);border-radius:18px;padding:22px 24px;max-width:380px;
  text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25)}
#load-fail .lf-card b{font-size:19px;display:block;margin-bottom:6px}
#load-fail .lf-card p{margin:0 0 16px;color:var(--muted)}
#load-fail .cta{width:100%}
.lb-hint{text-align:center;color:var(--muted);font-size:13.5px;line-height:1.5;margin:-4px auto 0;max-width:640px}
.lb-hint a{white-space:nowrap;color:var(--accent-deep)}
.lb-err{display:block;text-align:center;color:var(--bad);font-size:14px;margin:6px auto;max-width:640px}
.lb-err[hidden]{display:none}
/* Baner nad skóre, když si prohlížíš město sdílené odkazem */
.shared-banner{max-width:640px;margin:14px auto 0;padding:12px 20px;text-align:center;
  background:var(--accent-soft);border:2.5px solid var(--accent);border-radius:var(--radius);
  color:var(--accent-deep);font-weight:800;font-size:17px}
.shared-banner[hidden]{display:none}
/* Potvrzení „Odkaz zkopírován" pod tlačítky sdílení, samo zmizí */
.share-msg{display:block;text-align:center;color:var(--good);font-weight:700;font-size:14px;
  margin:6px auto;max-width:640px}
.share-msg[hidden]{display:none}

/* Výsledek: rozpis nejdřív zkrácený, lišta akcí přilepená dole */
.breakdown.collapsed .bd:nth-child(n+7){display:none}
.bd-more{display:block;margin:-6px auto 14px;background:#fff;border:2px solid var(--line);color:var(--muted);box-shadow:0 3px 0 rgba(30,40,25,.07)}
.bd-more[hidden]{display:none}
.resbar{position:sticky;bottom:0;z-index:12;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  margin:22px -20px -40px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(243,247,239,0),var(--bg) 22%);border-top:1px solid rgba(219,228,214,.7)}
.resbar .cta{flex:1 1 220px}
.resbar .ghost{background:#fff;border:2px solid var(--line);color:var(--muted);box-shadow:0 3px 0 rgba(30,40,25,.07)}
.resbar .share-msg{margin:0}
@media (max-width:700px){.resbar{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;gap:8px}.resbar .ghost{padding:9px 12px;font-size:14px;min-height:44px}}
/* diplom */
#dip-dialog{border:none;border-radius:20px;padding:22px 24px;max-width:min(92vw,560px);box-shadow:0 20px 60px rgba(0,0,0,.25)}
#dip-dialog::backdrop{background:rgba(36,50,40,.45)}
#dip-dialog input{width:100%;border:2.5px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;font-size:18px;margin:6px 0 10px}
#dip-dialog input:focus{border-color:var(--accent);outline:3px solid rgba(217,91,46,.35);outline-offset:2px}
.dip-preview{border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12);margin:0 0 12px;background:#fff;min-height:40px}
.dip-preview canvas,.dip-preview img{display:block;width:100%;height:auto}
#dip-printarea{display:none}
@media print{body>*:not(#dip-printarea){display:none !important}#dip-printarea{display:block !important;margin:0}
  #dip-printarea img{width:100%;height:auto;display:block}}
.mu-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:20}
.mu-confetti i{position:absolute;top:-24px;width:12px;height:16px;border-radius:2px;opacity:.95;
  animation:muFall linear forwards}
.mu-confetti i.star{background:none;width:auto;height:auto;font-size:20px;border-radius:0}
@keyframes muFall{to{transform:translateY(140%) rotate(640deg);opacity:0}}
#view-result{position:relative}

@media (min-width:1000px){
  #view-input.active{display:grid;grid-template-columns:minmax(0,1fr) 390px;
    grid-template-areas:"head side" "howto side" "board side" "legend side";gap:0 26px;align-content:start}
  .inputhead{grid-area:head}
  #view-input .howto{grid-area:howto;margin:0 0 8px;gap:6px 14px}
  #view-input .howto-step{font-size:13px;gap:7px}
  #view-input .howto-step b{width:22px;height:22px;font-size:12px}
  .maplegend{grid-area:legend}
  .scrollhint{display:none}   /* na širokém displeji se plán neposouvá; jinak by rozbil mřížku areas */
  .boardframe{grid-area:board;align-self:start;width:fit-content;max-width:100%;margin:0 auto}
  /* Paleta a Vyhodnotit jako jeden sloupec přes celou výšku plánu:
     řádky se rozdělí rovnoměrně, takže méně budov = větší tlačítka */
  .playside{grid-area:side;align-self:stretch;display:grid;grid-template-rows:1fr auto;gap:9px}
  .moves{min-height:44px;padding:6px 14px;font-size:14.5px;white-space:nowrap}
  #input-title{font-size:18px}
  .inputhead-chips{flex:0 0 auto}
  /* Paleta ve dvou sloupcích, ať se všechny budovy vejdou bez rolování stránky.
     Řádky se dělí o výšku sloupce (1fr): 16 čipů Těžší na iPadu na šířku (768 až 834 px)
     se dřív s pevným stropem 104 px nevešlo a Vyhodnotit bylo pod okrajem. Strop drží
     samotný čip (max-height), ať na vysokém monitoru nebobtná. */
  #palette{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(44px,1fr);
    gap:7px;align-items:center;margin:0}
  #palette .chip{min-height:0;height:100%;max-height:104px;padding:6px 12px;font-size:15.5px;gap:6px;
    justify-content:flex-start;text-align:left;line-height:1.15}
  #palette .chip .cnt{font-size:.74em}
  #palette .chip .price{font-size:.7em;margin-left:auto}
  #btn-eval{margin-top:0;min-height:52px;font-size:18px}
  /* legenda patří k plánu, pod paletou by zbytečně prodlužovala stránku */
  .maplegend{grid-area:legend;margin:8px 0 0;font-size:12px}
  /* při hře smí být stránka širší než běžných 1180px, ať se plán roztáhne */
  main:has(#view-input.active){max-width:1500px;padding:14px 20px 6px}
  /* šířka nesmí záviset na obsahu políček (rám je fit-content): jen viewport */
  .grid{width:min(calc(min(100vw,1500px) - 460px),calc((100vh - 310px) / var(--rows,5) * var(--cols,7)))}
}
/* Nízké obrazovky (malé notebooky): ještě těsnější paleta, ať se nemusí rolovat */
@media (min-width:1000px) and (max-height:640px){
  #palette{gap:5px;grid-auto-rows:minmax(34px,1fr)}
  #palette .chip{padding:4px 10px;font-size:14px}
  .inputhead{margin:0 2px 6px}
  #input-title{font-size:17px}
  .moves{padding:5px 12px;font-size:13.5px}
  #btn-eval{min-height:46px;margin-top:8px;font-size:16.5px}
  /* plán musí ustoupit paletě, jinak by se muselo rolovat */
  .grid{width:min(calc(min(100vw,1500px) - 460px),calc((100vh - 300px) / var(--rows,5) * var(--cols,7)))}
  /* nápověda 1-2-3 se sem nevejde; hra ji má i v Pravidlech */
  #view-input .howto{display:none}
  .maplegend{font-size:11px;margin-top:6px}
  /* políčka jsou tu tak malá, že se slovo parcela nevejde: zůstane jen číslo */
  .cell.parcel small{display:none}
  .cell.set small{font-size:9px;padding:0 2px}
}

:root[data-dir='a']{--bg:#EFE6D4}
:root[data-dir='a'] body{background:#EFE6D4;
  background-image:radial-gradient(circle at 18% 12%,rgba(255,255,255,.5),transparent 42%),
                   radial-gradient(circle at 84% 88%,rgba(200,185,150,.25),transparent 45%)}

:root[data-dir='b']{--bg:#F1F6F1;--board:#EAF2E4;--board-edge:#CBDFC0;--board-edge2:#B7CFAA;
  --cardsh:0 8px 20px rgba(30,60,35,.12)}
:root[data-dir='b'] body{background:radial-gradient(circle at 20% 0%,#FBFDF9,#EEF5EC 60%)}
:root[data-dir='b'] .appbar{box-shadow:0 4px 18px rgba(200,80,40,.22)}
:root[data-dir='b'] .boardframe{border-width:3px;box-shadow:0 10px 30px rgba(40,80,45,.14);
  background-image:none;border-radius:26px}
:root[data-dir='b'] .cell{border-radius:14px}
:root[data-dir='b'] .grid{gap:8px}
:root[data-dir='b'] .optcard,:root[data-dir='b'] .chip{border-radius:18px}
:root[data-dir='b'] .cta{border-radius:999px}
:root[data-dir='b'] .cell.set{border-top:none;box-shadow:0 6px 16px rgba(40,80,45,.16),inset 0 0 0 2px var(--good)}
:root[data-dir='b'] .big{text-shadow:0 4px 12px rgba(217,91,46,.24)}
:root[data-dir='b'] .breakdown{border-radius:24px}

/* ---------- jak na to (kroky) ---------- */
.howto{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 14px}
.howto-step{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--muted)}
.howto-step b{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-step);color:#fff;font-size:14px;box-shadow:0 2px 0 var(--accent-deep)}
.howto-fix{display:none}
/* jednořádkový návod: jen na telefonu, když už stojí první budova */
.howto-mini{display:none;font-size:13.5px;font-weight:700;color:var(--muted)}
@media (max-width:640px){
  #view-input.howto-kratce .howto-place .howto-step{display:none}
  #view-input.howto-kratce .howto-place .howto-mini{display:block}
  #view-input.howto-kratce .howto-place{margin-bottom:6px}
}
@supports selector(:has(*)){
  #view-input:has(#moves-left:not([hidden])) .howto-place{display:none}
  #view-input:has(#moves-left:not([hidden])) .howto-fix{display:flex}
}

/* ---------- legenda ---------- */
.scrollhint{margin:6px 0 0;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.scrollhint[hidden]{display:none}
.maplegend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 2px 4px;
  font-size:14px;font-weight:700;color:var(--muted)}
.maplegend b{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.maplegend span{display:inline-flex;align-items:center;gap:7px}
.maplegend .cell{width:24px;height:24px;aspect-ratio:auto;display:inline-block;border-radius:7px;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.maplegend .cell.parcel{box-shadow:inset 0 0 0 2px rgba(150,180,130,.9)}

/* ---------- živé mikroanimace ---------- */
.cell.f-water::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);
  transform:translateX(-100%);animation:muShimmer 4.2s ease-in-out infinite}
@keyframes muShimmer{55%,100%{transform:translateX(100%)}}
.maplegend .cell{position:relative;overflow:hidden}

.grid.mu-hint .cell.parcel:not(.sel){animation:muHintPulse 1.15s ease-in-out infinite}
@keyframes muHintPulse{0%,100%{box-shadow:inset 0 0 0 3px rgba(150,180,130,.9)}
  50%{box-shadow:inset 0 0 0 4px var(--accent),0 0 0 4px rgba(217,91,46,.25)}}

.chip.sel{animation:muPick .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes muPick{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:none}}

#btn-eval:not(:disabled){animation:muCtaGlow 2.8s ease-in-out infinite}
@keyframes muCtaGlow{0%,100%{box-shadow:0 5px 0 var(--accent-deep),0 10px 20px rgba(180,70,30,.3)}
  50%{box-shadow:0 5px 0 var(--accent-deep),0 10px 26px rgba(180,70,30,.45),0 0 0 6px rgba(217,91,46,.14)}}

.badge:not(:empty){animation:muBadgePop .55s .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes muBadgePop{0%{opacity:0;transform:scale(.4) rotate(-4deg)}70%{transform:scale(1.1) rotate(1deg)}
  100%{opacity:1;transform:none}}
.big{display:inline-block;animation:muScoreIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes muScoreIn{0%{transform:scale(.5);opacity:0}100%{transform:none;opacity:1}}

.meter i{position:relative;overflow:hidden}
.meter i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-100%);animation:muShimmer 2.6s ease-in-out infinite}

#view-input.tut .howto{display:none !important}
/* ---------- domovská obrazovka ---------- */
.home-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
  padding:7vh 10px 24px;max-width:660px;margin:0 auto}
.home-logo{width:116px;height:116px;background:#fff;border-radius:30px;display:grid;
  place-items:center;box-shadow:0 10px 26px rgba(30,40,25,.16),inset 0 0 0 3px var(--accent-soft);
  transform:rotate(-3deg)}
.home-hero h1{font-family:var(--display);font-size:clamp(36px,7vw,54px);margin:0;font-weight:800;
  line-height:1.05}
.home-hero h1 em{color:var(--accent);font-style:normal}
.home-lede{font-size:clamp(15px,2.4vw,18px);color:var(--muted);max-width:52ch;margin:0;
  line-height:1.55;font-weight:600}
.home-cta{width:min(420px,100%);flex:none;margin-top:6px}
.home-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.home-row .ghost,#view-settings .ghost{background:#fff;border:2px solid var(--line);
  color:var(--ink);box-shadow:0 3px 0 rgba(30,40,25,.07)}
a.btnlink{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;background:#fff;border:2px solid var(--line);color:var(--ink);
  border-radius:999px;padding:9px 18px;font-weight:800;font-size:15px;min-height:48px;
  box-shadow:0 3px 0 rgba(30,40,25,.07)}
a.btnlink:hover{border-color:var(--accent);color:var(--accent-deep)}
.partners{margin:52px auto 0;text-align:center;max-width:540px}
.partners h3{margin:0 0 12px}
.partners img{width:min(250px,66%);height:auto}

/* ---------- responzivita (telefon) ---------- */
@media (max-width:700px){
  main{padding:12px 10px 30px}
  .appbar{padding:8px 12px;gap:8px}
  .brand-text{font-size:18px}
  .logo-mark{width:36px;height:36px}
  .logo-mark svg{width:32px;height:32px}
  #appbar-info{display:none}
  button.ghost,a.btnlink{padding:7px 12px;font-size:13.5px;min-height:44px}
  h2{font-size:23px}
  h3{margin:14px 0 8px}
  .optcard{padding:10px 14px;font-size:14.5px;min-height:48px}
  .cta{font-size:16.5px;min-height:52px;padding:12px 16px}
  .switchrow{margin:12px 2px;font-size:14.5px;padding:10px 14px}
  .grid{gap:3px}
  :root[data-dir='b'] .grid{gap:4px}
  .cell{border-radius:7px}
  :root[data-dir='b'] .cell{border-radius:9px}
  .cell small{font-size:7.5px}
  .cell.parcel small{font-size:7px;padding:1px 4px}
  .pnum{font-size:9px;padding:2px 4px;top:2px;left:3px}
  .boardframe{padding:6px;border-width:4px}
  .chip{padding:7px 11px;font-size:13px;min-height:44px}
  .inputhead{flex-wrap:wrap}
  .moves{padding:5px 10px;font-size:12.5px}
  .howto-step{font-size:12px}
  .maplegend{font-size:12px;gap:6px 10px}
  .coach{font-size:14.5px;padding:10px 12px;flex-wrap:wrap}
  .coach .cta{width:100%;margin-left:0}
  .big{font-size:54px}
  .bd{font-size:14px;gap:8px;padding:10px 6px}
  .bd .ico{width:34px;height:34px;font-size:20px}
  .qrbox{flex-direction:column;text-align:center;gap:10px}
  .lb-entry{flex-direction:column}
  .home-logo{width:92px;height:92px}
  .rb-grid{grid-template-columns:1fr}
}

/* Mimo desktop (tam šířku řídí viewport výpočet): políčko nikdy pod 44 px,
   širší plán (9×6) se místo zmenšování posouvá do strany. */
@media (max-width:999px){
  .boardframe{overflow-x:auto}
  .grid{min-width:calc(var(--cols,7) * 44px + (var(--cols,7) - 1) * 4px)}
}

/* Velmi úzké displeje: lišta se smí zalomit, ať nepřetéká */
@media (max-width:360px){
  .appbar{flex-wrap:wrap;padding:6px 8px;gap:6px}
}

/* ---------- telefon: paleta jako přilepený pás dole ----------
   Na tabletu (hlavní zařízení) je plán i paleta naráz v obraze a nic z tohohle
   se neuplatní. Na telefonu ale paleta začínala až pod ohybem, takže dítě
   odscrollovalo dolů pro budovu, nahoru na parcelu a zase dolů, a tak pořád
   dokola. Proto se na úzkých displejích paleta i Vyhodnotit přilepí ke spodní
   hraně a budovy se posouvají do strany. Hranice 640 px je schválně pod
   nejužším tabletem, ať se tahle úprava nemá jak dostat do stánku. */
@media (max-width:640px){
  /* Nástup obrazovky se jinde dělá posunem (transform). Jenže prvek s transformem
     se stává vztažným rámcem pro position:fixed uvnitř, takže by přilepený pás
     prvních 0,34 s visel mimo obrazovku a pak naskočil. Na telefonu proto herní
     obrazovka nastupuje jen prolnutím. */
  #view-input.active{padding-bottom:152px;animation:muViewFade .34s ease}
  @keyframes muViewFade{from{opacity:0}to{opacity:1}}
  #view-input.active .playside{
    position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;
    display:flex;flex-direction:column;gap:8px;
    background:var(--bg);border-top:1px solid var(--line);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 18px rgba(30,40,25,.14);
  }
  #view-input.active #palette{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    gap:8px;margin:0;padding-bottom:2px;scroll-snap-type:x proximity;
  }
  #view-input.active #palette .chip{
    flex:0 0 auto;height:auto;max-height:none;min-height:44px;scroll-snap-align:start;
    padding:8px 12px;font-size:14.5px;
  }
  #view-input.active #btn-eval{margin:0;min-height:48px;font-size:16.5px}
  #view-input.active #btn-undo{margin:0;min-height:44px}
  /* Přilepený pás dole nemá nad čím poskakovat, animace by jen rušila. */
  #view-input.active #btn-eval:not(:disabled){animation:none}
}

/* ---------- kompletní pravidla ---------- */
.ruleshead{display:flex;align-items:center;justify-content:space-between;gap:12px}
#view-rules .ghost{background:#fff;border:2px solid var(--line);color:var(--muted);min-height:48px}
.rules-p{font-size:16px;line-height:1.6;max-width:74ch;margin:6px 0 10px}
.rules-titles{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.titlechip{background:var(--good-soft);color:var(--good);border-radius:999px;padding:7px 14px;
  font-size:14.5px;font-weight:600}
.rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:8px 0}
.rb-card{background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px 16px;
  box-shadow:0 3px 10px rgba(30,40,25,.06)}
.rb-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.rb-ico{font-size:28px}
.rb-head b{font-size:16.5px}
.rb-head small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:800}
.rb-rule{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-size:14px;line-height:1.4;
  border-top:1px solid var(--line)}
.rb-rule i{color:var(--muted);font-style:normal;font-size:12.5px}
.rb-rule .pip{flex:0 0 auto;width:21px;height:21px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:1px}
.pip.y{background:var(--good-soft);color:var(--good)}
.pip.n{background:var(--bad-soft);color:var(--bad)}
/* ikona fajfky a křížku v kolečku (dřív znaky ✓ ✕, ty iOS Safari nekreslí) */
.pip .pip-ico{width:68%;height:68%;vertical-align:0}
/* kolečko uprostřed věty v úvodu pravidel */
.rules-p .pip{display:inline-flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;
  border-radius:50%;vertical-align:-.28em;margin:0 .1em}
.rpts{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto;
  padding:2px 9px;border-radius:999px;font-size:13.5px}
.rpts.plus{color:var(--good);background:var(--good-soft)}
.rpts.minus{color:var(--bad);background:var(--bad-soft)}
.rb-line{background:#fff;border:2px solid var(--line);border-radius:14px;padding:11px 16px;
  margin:8px 0;font-size:15px;line-height:1.5}
.rb-line small{color:var(--muted);font-size:13.5px}

/* ---------- kouč (tutoriál) ---------- */
.coach{display:flex;align-items:flex-start;gap:14px;background:#fff;border:2.5px solid var(--accent);
  border-radius:18px;padding:14px 18px;margin:6px 0 14px;box-shadow:0 6px 18px rgba(217,91,46,.18);
  font-size:17px;font-weight:700;line-height:1.45}
.coach[hidden]{display:none}
#coach-ico{font-size:30px;flex:0 0 auto}
.coach.pulse{animation:muCoach .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes muCoach{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
.coach .cta{flex:0 0 auto;margin-left:auto;min-height:48px;padding:10px 20px;font-size:16px}

/* ---------- bubliny živého bodování ---------- */
.grid{position:relative}
.bubble{position:absolute;z-index:15;pointer-events:none;
  background:#fff;border-radius:14px;padding:7px 12px;box-shadow:0 6px 16px rgba(30,40,25,.25);
  display:flex;flex-direction:column;align-items:center;gap:1px;max-width:200px;text-align:center;
  font-size:12.5px;font-weight:700;line-height:1.25;animation:muBubble var(--bub-dur,5s) ease-out forwards}
.bubble b{font-size:19px;line-height:1}
.bubble.plus b{color:var(--good)} .bubble.minus b{color:var(--bad)}
.bubble.plus{border:2px solid var(--good)} .bubble.minus{border:2px solid var(--bad)}
/* Naskočí, stojí na místě, na konci jen zeslábne. Pozici počítá bubbleAt (app/live.js). */
@keyframes muBubble{0%{opacity:0;transform:scale(.7)}
  5%{opacity:1;transform:scale(1.05)}8%{transform:none}
  90%{opacity:1}100%{opacity:0}}

/* ---------- časovač a chips ---------- */
.inputhead-chips{display:flex;gap:8px;align-items:center}
#timer.low{background:var(--bad-soft);color:var(--bad);border-color:var(--bad);
  animation:muTimerLow 1s ease-in-out infinite}
@keyframes muTimerLow{50%{transform:scale(1.06)}}
#timer.over{animation:timeblink 1s infinite}
@keyframes timeblink{50%{opacity:.35}}
#live-chip{background:var(--good-soft);color:var(--good);border-color:var(--good)}

/* ---------- QR zahraj si doma ---------- */
.qrbox{display:flex;align-items:center;gap:18px;background:#fff;border:2px solid var(--line);
  border-radius:18px;padding:16px 20px;margin:0 auto 16px;max-width:640px;
  box-shadow:0 4px 14px rgba(30,40,25,.08)}
#qr svg{display:block;width:96px;height:96px}
.qrtext{display:flex;flex-direction:column;gap:2px;font-size:15px}
.qrtext b{font-size:17px}
.qrtext small{color:var(--muted)}

/* ---------- poutací režim ---------- */
#attract-banner{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:50;
  background:var(--accent);color:#fff;font-weight:800;font-size:19px;font-family:var(--display);
  padding:14px 30px;border-radius:999px;box-shadow:0 8px 24px rgba(180,70,30,.4);
  animation:muBanner 1.6s ease-in-out infinite;pointer-events:none}
@keyframes muBanner{50%{transform:translateX(-50%) scale(1.05)}}
#attract-banner[hidden]{display:none}
#err-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  background:#243228;color:#fff;font-weight:800;font-size:16px;padding:14px 22px;border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:92vw;text-align:center}
#err-toast[hidden]{display:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
.bd{animation:muRowIn .45s cubic-bezier(.22,1,.36,1) both}
@keyframes muRowIn{0%{opacity:0;transform:translateX(-14px)}100%{opacity:1;transform:none}}
.bd:nth-child(1){animation-delay:.1s}.bd:nth-child(2){animation-delay:.18s}.bd:nth-child(3){animation-delay:.26s}
.bd:nth-child(4){animation-delay:.34s}.bd:nth-child(5){animation-delay:.42s}.bd:nth-child(6){animation-delay:.5s}
.bd:nth-child(7){animation-delay:.58s}.bd:nth-child(8){animation-delay:.66s}.bd:nth-child(9){animation-delay:.74s}
.bd:nth-child(n+10){animation-delay:.82s}

#pw-dialog{border:none;border-radius:16px;padding:22px;max-width:320px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
#pw-dialog::backdrop{background:rgba(36,50,40,.45)}
#pw-dialog h3{margin:0 0 6px}
#pw-dialog input{width:100%;box-sizing:border-box;font-size:18px;padding:10px 12px;margin:10px 0;border:2px solid #ccc;border-radius:10px}
#pw-dialog.shake{animation:pwshake .3s}
@keyframes pwshake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
#pw-dialog .ghost{background:#fff;border:2px solid var(--line);color:#5C6B5D}

/* ---------- směr APPLE (?dir=apple): HIG vrstva nad směrem "b" ----------
   Neutrály a materiály podle Apple HIG, terakotová zůstává jako jediný tint.
   Herní plán (dřevo, políčka) se nemění: je to obsah hry, ne chrome. */
:root[data-apple]{
  --bg:#F2F2F7; --surface:#FFFFFF; --ink:#1D1D1F;
  /* Apple secondaryLabel rgba(60,60,67,.6) dává na #F2F2F7 jen 3,3:1 (pod WCAG AA).
     Neprůhledná #6C6C70 zachová měkký vzhled a má 4,7:1 na pozadí a 5,2:1 na bílé. */
  --muted:#6C6C70;
  --line:rgba(60,60,67,.29);
  --cardsh:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
  --appbar:rgba(255,255,255,.72)}
:root[data-apple] body{background:var(--bg)}

/* lišta = mléčné sklo s vlásečnicí, text inkoustem, akce tintem */
:root[data-apple] .appbar{color:var(--ink);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:none;border-bottom:1px solid var(--line);position:sticky;top:0}
:root[data-apple] button.brand{color:var(--ink)}
:root[data-apple] .logo-mark{background:rgba(120,120,128,.12);box-shadow:none}
:root[data-apple] .brand-text{text-shadow:none}
:root[data-apple] .brand-text b{color:var(--accent-deep)}
/* #B8461E na šedém podkladu tlačítka dává jen 4,2:1, o stupeň tmavší tint 5:1 */
:root[data-apple] button.ghost{background:rgba(120,120,128,.12);border:none;color:#9E3A17}
:root[data-apple] button.ghost:active{transform:scale(.97);background:rgba(120,120,128,.2)}

/* tlačítka: plný tint bez 3D hran, zmáčknutí = scale */
:root[data-apple] .cta{box-shadow:none;animation:none;
  transition:transform .2s cubic-bezier(.32,.72,0,1),opacity .2s}
:root[data-apple] .cta:active{transform:scale(.97);box-shadow:none}
:root[data-apple] .cta:disabled{box-shadow:none}
:root[data-apple] :is(.home-row,#view-settings,#view-result,#view-ops,#view-lb,#view-input,#view-rules,.resbar) .ghost,
:root[data-apple] .bd-more{border-width:1px;box-shadow:none}
:root[data-apple] #btn-undo{border-width:1px;box-shadow:none}
:root[data-apple] .lb-entry button{border-width:1px;box-shadow:none}

/* karty a čipy: vlásečnice nebo měkký stín, výběr = vnitřní kroužek tintu */
:root[data-apple] :is(.optcard,.switchrow,.chip,.breakdown,.rb-card,.rb-line,.qrbox,.coach,.lb,.shared-banner,.lb-entry input,#dip-dialog input){border-width:1px}
:root[data-apple] :is(.optcard,.rb-card,.qrbox,.breakdown){border-color:transparent;box-shadow:var(--cardsh)}
:root[data-apple] .optcard.sel{box-shadow:var(--cardsh),inset 0 0 0 2px var(--accent)}
:root[data-apple] .chip.sel{box-shadow:inset 0 0 0 2px var(--accent)}
:root[data-apple] .coach{border-color:var(--line);box-shadow:var(--cardsh)}
:root[data-apple] .moves{border-width:1px;box-shadow:none}
:root[data-apple] .howto-step b{box-shadow:none}
:root[data-apple] .badge{box-shadow:none}
:root[data-apple] .big{text-shadow:none}
:root[data-apple] .home-logo{box-shadow:var(--cardsh)}

/* lišta akcí u výsledku = sklo místo přechodu */
:root[data-apple] .resbar{background:var(--appbar);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line)}