@import url('./tokens.css');
:root{--world-sand:#f6e7c8;--ink:#654528;--gold:#e9b64b;--row:64px;font-family:ui-rounded,'Trebuchet MS',sans-serif;color:var(--ink);background:#ede0bd}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:active{transform:scale(.95)}button:focus-visible{outline:4px solid #9464a0;outline-offset:3px}button:disabled{cursor:default;filter:saturate(.4);opacity:.55}button img{width:100%;height:100%;object-fit:contain;pointer-events:none}img{user-select:none;-webkit-user-drag:none}[hidden]{display:none!important}
#game{position:relative;width:100%;height:100dvh;min-height:600px;isolation:isolate;overflow:hidden}.world,.world img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.world:after{content:'';position:absolute;inset:0;background:#f5e6ba22}.opening{position:absolute;inset:0;z-index:5;background:#ded5ae}.opening picture,.opening picture img{width:100%;height:100%;display:block;object-fit:contain}.opening picture{background:radial-gradient(#b1d9ce,#5e9a9a)}.start{position:absolute;bottom:2%;left:0;right:0;text-align:center}.start h1{display:table;margin:0 auto 4px;padding:7px 22px;background:#fff8e6e8;border-radius:30px;font-size:clamp(16px,2vw,25px)}.icon{width:56px;height:56px;background:none;border:0;padding:0;flex:none}.big{width:88px;height:88px}.corner-rune{position:absolute;left:max(10px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:58px;height:58px;object-fit:contain;z-index:30;pointer-events:none}
#playfield{height:100%;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px;display:grid;grid-template-columns:minmax(150px,1fr) minmax(370px,600px) minmax(140px,1fr);grid-template-rows:70px 1fr 84px;gap:12px}header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:15px}nav{display:flex;gap:9px}#path{display:flex;gap:10px}#path span{display:grid;place-items:center;border:2px solid #cca76c;background:#fffae9;border-radius:50%;width:34px;height:34px;font-weight:bold}#path .active{background:#f7cf6e;box-shadow:0 0 0 4px #fff4c9}#path .done{background:#eac584}#rounds{display:flex;gap:7px}#rounds i{width:14px;height:14px;border:2px solid #b58544;background:#fff7d9;border-radius:50%}#rounds .done{background:#e9b64b}
.guide{align-self:center;display:flex;flex-direction:column;align-items:center;min-width:0}.guide>button{background:none;border:0;width:min(100%,185px);height:190px;padding:0}.speech{position:relative;z-index:1;background:#fff8e8;border:3px solid #d2af75;border-radius:45% 40% 40% 30% / 25% 30% 28% 30%;padding:18px 12px;text-align:center;width:100%;max-width:215px;box-shadow:0 8px 0 #ae84553b}.speech:before{content:'';position:absolute;top:-15px;left:45%;width:25px;height:25px;background:#fff8e8;border-top:3px solid #d2af75;transform:skewY(40deg);z-index:-1}.speech p{font-size:19px;font-weight:bold;margin:7px 0 0}#cue{height:40px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:32px}#cue img{width:40px;height:40px;object-fit:contain}.hero{align-self:end;padding-bottom:50px}.hero img{width:100%;max-height:240px;object-fit:contain;animation:float 5s ease-in-out infinite}.board{align-self:center;width:100%;padding:22px 24px 16px;background:linear-gradient(135deg,#fff8e9,#f4dfb8);border:6px solid #d6b07b;border-radius:42px;box-shadow:0 10px 0 #946b3e55,0 20px 40px #304d4633;position:relative}#chart{display:flex;gap:24px;justify-content:center;align-items:end}.column{flex:1;min-width:0;padding:0 8px 8px;border:3px solid transparent;border-radius:22px;background:#ebd6b266;position:relative}.column.selected{border-color:#d99d30;background:#fff0bd;box-shadow:0 0 0 3px #fff7d8}.stack{display:flex;flex-direction:column-reverse;border-bottom:4px solid #a87949;height:calc(4 * var(--row));background:repeating-linear-gradient(to top,transparent 0,transparent calc(var(--row) - 2px),#cfa97966 calc(var(--row) - 2px),#cfa97966 var(--row));align-items:center}.slot{height:var(--row);width:var(--row);flex:none;display:grid;place-items:center;animation:arrive .25s ease-out}.slot img{width:90%;height:90%;object-fit:contain}.category{height:56px;display:flex;justify-content:center;align-items:center;gap:6px}.category img{width:45px;height:45px;object-fit:contain}.category b{font-size:22px}.column{cursor:pointer}.column:focus-visible{outline:4px solid #9464a0}#tray{margin:18px auto 0;display:flex;justify-content:center;align-items:center;gap:14px;min-height:64px}#tray button{position:relative;border:3px solid #d5b27d;border-radius:20px;width:76px;height:66px;background:#fffaf0;padding:6px;box-shadow:0 5px 0 #b4885050}#tray button.selected{border-color:#d99d30;background:#ffe8a1;transform:translateY(-4px)}#tray button img{width:48px;height:48px}#tray small{position:absolute;right:3px;bottom:3px;font-weight:bold;background:#f5dfb2;border-radius:15px;padding:1px 5px;font-size:15px}footer{grid-column:2;display:flex;justify-content:center;align-items:center;gap:24px}.check{width:76px;height:76px}#undo,#skip{width:56px;height:56px;border:2px solid #c89e61;border-radius:50%;background:#fff3d3;font-size:32px}#relations{display:flex;justify-content:center;gap:24px;margin-top:16px}#relations button{display:flex;align-items:center;justify-content:center;gap:14px;width:130px;height:66px;border:3px solid #d0ac72;border-radius:20px;background:#fffaf0;font-size:30px}#relations button.selected{background:#ffe5a0;border-color:#c99127}.bars{height:34px;display:flex;align-items:end;gap:6px}.bars i{display:block;width:10px;height:32px;background:#a584b0;border-radius:5px}.bars.different i:last-child{height:17px}#hand{position:absolute;z-index:12;font-size:45px;pointer-events:none;filter:drop-shadow(0 2px 2px #6c4327);transition:left .5s,top .5s}.hint{box-shadow:0 0 0 5px #edc35d!important}.success .stack{background-color:#ffe5a0}.success .hero img{animation:arrive .5s ease-out}.nudge{animation:nudge .3s ease-in-out}
#overlay{position:absolute;inset:0;z-index:20;background:#23484288;backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px 20px 78px}.panel{width:min(560px,100%);max-height:100%;overflow:auto;border:6px solid #d0a368;border-radius:40px;background:linear-gradient(135deg,#fff9e9,#f1ddb6);text-align:center;padding:22px;box-shadow:0 14px 0 #62462a44}.panel h2{font-size:28px;margin:0 0 14px}.panel>img{width:100%;height:220px;object-fit:contain}.panel>img.finale{height:250px}#panel-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:18px}#panel-actions button{width:70px;height:70px}.level-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}#level-buttons button{width:58px;height:58px;border-radius:50%;border:3px solid #c59b56;background:#fbe5af;font-weight:bold;font-size:24px}.paused *{animation-play-state:paused!important}
@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}@keyframes arrive{from{transform:translateY(-12px) scale(.9);opacity:.5}to{transform:none;opacity:1}}@keyframes nudge{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(orientation:portrait){:root{--row:52px}#playfield{grid-template-columns:1fr;grid-template-rows:94px 94px 1fr 80px;gap:6px;padding:10px 14px 10px}header{position:relative;height:94px;align-items:start;padding-top:0}nav{margin-left:auto;gap:8px}#rounds{position:absolute;top:72px;left:4px}#path{position:absolute;top:62px;right:0;gap:8px}#path span{width:30px;height:30px;font-size:15px}.guide{grid-column:1;grid-row:2;flex-direction:row;justify-content:center;align-self:stretch;gap:4px}.guide>button{width:90px;height:94px;flex:none}.speech{max-width:230px;padding:7px 12px;border-radius:28px;min-height:76px}.speech:before{top:33px;left:-10px;width:20px;height:18px;border-top:0;border-left:3px solid #d2af75;transform:skewY(-30deg)}.speech p{font-size:17px;margin:2px 0}#cue{height:30px;font-size:26px}#cue img{width:30px;height:30px}.board{grid-row:3;padding:14px 16px 12px;border-width:4px;border-radius:30px;max-width:430px;justify-self:center}#chart{gap:18px}.column{padding:0 4px 3px;border-radius:16px}.category{height:46px}.category img{width:38px;height:38px}#tray{margin-top:12px;min-height:56px}#tray button{width:72px;height:56px;padding:2px}#tray button img{width:44px;height:44px}#relations{margin-top:12px;gap:18px}#relations button{height:56px;width:110px}.hero{position:absolute;right:8px;bottom:10px;width:78px;height:64px;padding:0}.hero img{height:64px}footer{grid-column:1;grid-row:4;gap:16px;margin:0 60px 0 45px}.check{width:70px;height:70px}#undo,#skip{width:48px;height:48px;font-size:28px}.corner-rune{width:48px;height:48px}.start h1{font-size:16px;padding:6px 12px}.big{width:80px;height:80px}.panel{padding:18px 14px}.panel h2{font-size:24px}.panel>img{height:190px}#level-buttons button{width:52px;height:52px}.level-grid{gap:10px}}
@media(orientation:portrait) and (max-height:700px){:root{--row:44px}#playfield{grid-template-rows:92px 84px 1fr 74px;gap:4px}.guide>button{height:84px}.board{padding:10px 12px}.category{height:42px}#tray{margin-top:10px}.stack{height:176px}.speech p{font-size:16px}.panel>img{height:155px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

#panel-actions{gap:12px}#panel-actions button{width:60px;height:60px}