:root{font-family:'Nunito',system-ui,'Noto Sans',sans-serif;font-size:16px;line-height:1.5;font-weight:750;color:#303349;background:#f4f1de}*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:0 auto;padding:12px}h1,h2,figcaption,p,button,li{overflow-wrap:anywhere}h1{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-size:1.8rem;line-height:1.15;margin:.35rem 0 .5rem}h2{font-size:1.2rem;line-height:1.35}p{margin:.7rem 0}button{font:inherit;color:inherit;border:2px solid #707d72;border-radius:12px;background:#fffef8;min-width:44px;min-height:44px;padding:8px 12px;max-width:100%;white-space:normal;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 0 #30334915}button:disabled{opacity:.56;cursor:default;box-shadow:none}button:focus-visible{outline:3px solid #ad4a31;outline-offset:2px}.primary{background:#3d405b;color:#fff}.selected{background:#c6d8bc;outline:3px solid #ad4a31;outline-offset:1px}nav,#actions,.row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}#stats{padding:10px;border-radius:12px;background:#dce5d2}#best{font-size:.92rem}#notice,.warning{color:#8d342c}#notice:empty,#audio-note:empty,#best:empty,#preview:empty{display:none}#audio-note{font-size:.9rem}#hero{background:#dce5d2;border-radius:18px;overflow:hidden;margin:12px 0}#hero img{display:block;width:100%;max-height:380px;object-fit:contain}#host-area{float:right;width:100px;margin:0 0 10px 12px}#host-canvas{display:block;width:100%;height:auto}#host-caption{font-size:.8rem;line-height:1.4;text-align:center}#body p{margin:.45rem 0}#dice{clear:both}#actions{margin:.8rem 0 1rem}.panel{padding:12px;background:#fff9;border-radius:14px;margin:12px 0}.dice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,3.2rem),1fr));gap:8px;max-width:540px;margin:.5rem 0}.die{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:90px;padding:5px 4px;background:radial-gradient(ellipse at 30% 20%,#fff9 0,transparent 55%),linear-gradient(150deg,#fff9e9,#f1e4c6);border-color:#a8997a;box-shadow:inset 0 2px 1px #fff9,inset 0 -3px 2px #8b78572b,0 3px 0 #685c3d2b}.die.selected{background:radial-gradient(ellipse at 30% 20%,#ffffff80,transparent 55%),#c6d8bc;border-color:#7c9272}.die:disabled{opacity:1}.die-value{font-size:.85rem;line-height:1.1}.held-label{font-size:.82rem;line-height:1.2}.pips{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:2rem;height:2rem;gap:.16rem;padding:.1rem}.pip{border-radius:50%;background:#3d405b;box-shadow:inset 0 1px 1px #0004}.pip.empty{visibility:hidden}.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;margin:1rem 0}.score-entry{min-width:0;border-radius:12px}.score-row{display:block;width:100%;text-align:left}.booked-row{padding:9px 12px;min-height:44px;border:1px solid #9da68f;border-radius:12px;background:#e9eddd;color:#303349;overflow-wrap:anywhere}.inline-preview{padding:9px 8px;background:#e4eadb;border-radius:0 0 12px 12px}.inline-preview p{margin:0 0 8px}.inline-preview button{width:100%}.shelf{display:flex;flex-wrap:wrap;gap:12px}.shelf figure{margin:0;padding:12px;width:200px;max-width:100%;background:#fff9;border-radius:14px}.shelf img{width:100%;height:160px;object-fit:contain}.shelf figcaption{line-height:1.4}.lesson-dice{display:flex;flex-wrap:wrap;gap:8px}.lesson-face{padding:8px;border:2px solid #a8997a;border-radius:8px;background:#fff9e9;min-width:44px;min-height:44px;text-align:center}li{margin:.8rem 0}footer{clear:both;border-top:1px solid #b9b398;margin-top:1.4rem;font-size:.84rem;padding-top:.3rem}[data-screen=play] #tagline,[data-screen=result] #tagline{display:none}.rolling{animation:clay-settle .18s ease-out}@keyframes clay-settle{0%{transform:translateY(-5px) rotate(-4deg) scale(1.03,.96)}60%{transform:translateY(1px) rotate(2deg) scale(.98,1.02)}100%{transform:none}}[data-motion=false] *,[data-motion=false] *:before{animation:none!important;transition:none!important}@media(min-width:900px){#host-area{width:300px;margin-left:20px}#play-main{overflow:hidden}header{display:grid;grid-template-columns:1fr auto;gap:4px 20px}#tagline{grid-column:1}nav{grid-column:2;grid-row:1/3;align-self:center}#hero img{max-height:420px}#dice{clear:none}}@media(max-width:600px){[data-screen=play] #host-caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}nav{margin:8px 0}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}