:root{--ink:#123d40;--cream:#fff5d7;--gold:#ffd56a;--dk-ink:#123d40}html,body{background:#123d40;color:var(--cream)}body{background:radial-gradient(ellipse at 50% 25%,#246d65,#123d40 65%);font-family:Nunito,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{border:0;font:800 15px Nunito,system-ui;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe17c;outline-offset:4px}button:disabled{opacity:.4;cursor:default}#app{width:100%;height:100%;max-width:1100px;margin:auto;padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));overflow:auto}header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px}.small{width:44px;height:44px;display:grid;place-items:center;background:#ffffff12;border:1px solid #ffffff30;border-radius:14px;color:var(--cream);font-size:26px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:900}.gold{color:var(--gold)}.welcome{text-align:center;max-width:560px;margin:3vh auto 0}h1{font:800 clamp(34px,7vw,60px)/.94 'Baloo 2',system-ui;margin:12px 0;color:#fff9e8;text-shadow:0 4px #0c302f}h1 span{color:var(--gold);font-size:.82em}.subtitle{font-size:14px;line-height:1.5;color:#c2e2da;margin:16px 0}.primary{background:linear-gradient(#ffe99a,#ffce51);color:#3f361d;border-radius:18px;box-shadow:0 5px #be8c2b;padding:14px 22px;min-height:52px;font-size:17px}.primary span{margin-left:18px}#bMain{width:min(100%,340px)}#progress{font-size:12px;color:#c2e2da;margin:14px 0}nav{display:flex;justify-content:center;gap:28px}nav button{background:none;color:#ffe9b4;font-size:26px;min-width:64px;min-height:64px}nav span,footer span{display:block;font-size:12px;margin-top:4px}#hero{display:flex;justify-content:center;gap:8px;padding:12px 0 25px}.sample{display:grid;place-items:center;background:linear-gradient(140deg,#fffdf0,#f3deb0);width:58px;height:72px;border-radius:12px;box-shadow:0 5px #b8ab8b,0 10px 15px #081e2540;transform:rotate(-8deg)}.sample:nth-child(even){transform:translateY(-10px) rotate(7deg)}.sample svg{width:50px;height:50px}#play{height:100%;display:flex;flex-direction:column;max-width:850px;margin:auto}.heading{text-align:center}h2{font:800 24px/1.1 'Baloo 2',system-ui;margin:3px 0}.heading small{color:#afdad0;font-size:11px}.stats{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff20;padding:14px 2px;font-size:12px;color:#e4ebcf}#arena{flex:1;min-height:180px;display:grid;place-items:center;overflow:hidden}#board{position:relative;flex:none}.tile{position:absolute;width:var(--tw);height:var(--th);border-radius:10px;border:1px solid #fff7d5;background:linear-gradient(135deg,#fffef1,#f4e0b3);box-shadow:0 5px #b5a47b,0 7px 9px #0d292b66;padding:3px;transition:filter .18s,transform .18s,opacity .18s}.tile svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 1px #58391b22)}.tile.blocked{filter:brightness(.75);cursor:default}.tile.selected{outline:3px solid #ffd45e;outline-offset:1px;transform:translateY(-5px)}.tile.hinted{outline:3px solid #75ffe0;outline-offset:1px}.tile.removing{opacity:0;transform:translateY(-18px) scale(.6);pointer-events:none}#status{min-height:36px;margin:4px 0;text-align:center;font-size:13px;color:#dcf0e5;line-height:1.4}footer{display:flex;gap:12px;justify-content:center;padding:8px 0}footer button{color:#fff3cc;background:#ffffff12;border:1px solid #ffffff25;border-radius:15px;min-height:60px;flex:1;max-width:155px;font-size:24px}dialog{background:#fff9e6;color:#173e40;border:0;border-radius:24px;padding:24px;width:min(92vw,420px);box-shadow:0 20px 80px #0008;max-height:85vh;overflow:auto}dialog::backdrop{background:#051c24b8}dialog p{font-size:14px;line-height:1.6}dialog .primary,dialog .secondary{width:100%;margin-top:12px}.secondary{min-height:44px;background:#123d4010;color:#173e40;border-radius:14px}.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.legend svg{width:48px;height:48px}.legend span{font-size:10px;display:block;text-align:center}.stars{font-size:40px;color:#df9d23;text-align:center}@media(max-height:580px) and (min-width:650px){.welcome{display:grid;grid-template-columns:1fr 1fr;max-width:780px;align-items:center;column-gap:40px;margin:0 auto}.welcome>p.eyebrow{grid-column:1}.welcome h1,.subtitle{grid-column:1}#hero{grid-column:2;grid-row:1/4}#bMain,#progress,nav{grid-column:2}.welcome h1{font-size:48px}#play header{height:44px}.stats{padding:7px}footer{padding:4px}footer button{min-height:48px}#status{min-height:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.tile.removing{transform:none}}

#saveNote{font-size:11px;color:#ffe29b;text-align:center;margin:0}

/* Lima Slot: warm porcelain, saturated illustration colors, clear raised layers. */
body{background:radial-gradient(ellipse at 50% 12%,#267d7a 0,#173e61 65%,#102e46 100%)}
.mode-picker{display:flex;gap:10px;justify-content:center;margin:0 auto 18px;max-width:340px}.mode-picker button{flex:1;min-height:55px;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff30;color:#d2eae7;font-size:14px}.mode-picker button[aria-pressed="true"]{background:#ffdc74;color:#39321e;border-color:#fff0b1;box-shadow:0 3px #ad8132}.mode-picker span{display:block;font-size:10px;margin-top:3px;font-weight:700}
.tile,.sample,.slot.filled,.flying-tile{background:radial-gradient(ellipse at 35% 12%,#fff 0,#fffaf0 45%,#f8dfb6 100%);border:1px solid #fffaf2;box-shadow:0 5px #b99467,0 7px 12px #081b3544}.tile:before,.sample:before,.slot.filled:before{content:"";position:absolute;left:8%;right:8%;bottom:7%;height:3px;background:var(--accent);border-radius:8px;opacity:.8}.sample{position:relative}.tile svg,.sample svg,.slot svg{filter:saturate(1.28) drop-shadow(0 2px 1px #6b463424)}.tile.blocked{filter:brightness(.87);box-shadow:0 5px #937a60,0 7px 8px #081b3544}.tile.hinted{outline-color:#7cffdb;box-shadow:0 5px #b99467,0 0 17px #75ffe090}.layer-mark{position:absolute;right:2px;top:1px;font-size:8px;line-height:11px;width:11px;height:11px;border-radius:50%;background:#214b5d;color:#fff3bf}
#trayPanel{background:linear-gradient(145deg,#132e48,#1c4961);border:1px solid #a4dad750;border-radius:18px;padding:10px 12px;margin-top:4px;box-shadow:0 5px 15px #081b352a;max-width:470px;align-self:center;width:100%}.tray-heading{display:flex;justify-content:space-between;color:#ffdf87;font-size:10px;letter-spacing:1px;margin-bottom:8px}#tray{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.slot{position:relative;aspect-ratio:1.05;border-radius:11px;border:1px dashed #a6d8d540;background:#07233577;display:grid;place-items:center;color:#7ea9ad;font-size:13px}.slot.filled{border-style:solid;color:#163747;animation:slot-in .18s ease-out}.slot svg{width:90%;height:90%}#trayPanel small{display:block;font-size:10px;text-align:center;color:#b9dcda;margin-top:8px}.danger{border-color:#ffb886!important}.danger #trayCount{color:#ffb886}.danger .slot:not(.filled){border-color:#ffb886;background:#6c442b50}.flying-tile{border-radius:10px;padding:3px}.flying-tile svg{width:100%;height:100%;filter:saturate(1.28)}.loss-preview{display:flex;gap:6px}.loss-preview span{background:#fff0c7;border-radius:12px;flex:1}.loss-preview svg{width:100%}.legend{grid-template-columns:repeat(3,1fr)}.legend svg{filter:saturate(1.28)}#status{font-size:12px;min-height:32px}.welcome{margin-top:1vh}.subtitle{margin:12px 0}#hero{padding:8px 0 18px}
@keyframes slot-in{from{transform:scale(.8);opacity:.4}}
@media(max-height:700px) and (max-width:649px){h1{font-size:34px}.subtitle{font-size:12px;margin:9px 0}.welcome>.eyebrow{margin:6px 0}#hero .sample{width:48px;height:59px}#hero .sample svg{width:42px;height:42px}.mode-picker{margin-bottom:12px}.mode-picker button{min-height:47px}nav button{min-height:54px}#trayPanel{padding:7px 10px}#trayPanel small{margin-top:6px}footer button{min-height:50px}footer{padding:5px 0}.stats{padding:9px 2px}}
@media(max-height:580px) and (min-width:650px){.mode-picker{grid-column:2;grid-row:4;margin:0 0 12px}.welcome #bMain{grid-row:5}.welcome #progress{grid-row:6}.welcome nav{grid-row:7}.welcome h1{font-size:44px}.welcome{column-gap:36px}#trayPanel{padding:5px 10px;max-width:350px}#tray{gap:7px}.slot{height:40px;aspect-ratio:auto}.tray-heading{margin-bottom:4px}#trayPanel small{margin-top:4px}#status{min-height:20px;font-size:11px}.stats{padding:6px}footer button{min-height:44px}footer span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.slot.filled{animation:none}}

#trayPanel.paired{animation:pair-glow .4s ease-out}@keyframes pair-glow{35%{border-color:#94ffe4;box-shadow:0 0 24px #60ffd86a}}@media(prefers-reduced-motion:reduce){#trayPanel.paired{animation:none}}

/* Keep home actions together on desktop and landscape phones. */
@media(min-width:700px),(min-width:560px) and (orientation:landscape){
 #home .welcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:900px;column-gap:32px;row-gap:8px;margin:20px auto;align-items:center}
 #home .welcome>.eyebrow{grid-column:1;grid-row:1;margin:0}
 #home .welcome>h1{grid-column:1;grid-row:2;margin:8px 0;font-size:48px}
 #home .welcome>.subtitle{grid-column:1;grid-row:3;margin:0}
 #home #hero{grid-column:1;grid-row:4/7;padding:15px 0;min-width:0;gap:6px}
 #home .sample{width:48px;height:62px;flex-shrink:1}#home .sample svg{width:100%;max-width:46px}
 #home .mode-picker{grid-column:2;grid-row:1/3;width:100%;margin:0;align-self:end}
 #home #bMain{grid-column:2;grid-row:3/5;justify-self:center;align-self:center}
 #home #progress{grid-column:2;grid-row:5;margin:5px 0}
 #home nav{grid-column:2;grid-row:6}
}
@media(min-width:560px) and (max-height:430px){
 #home .welcome{margin:8px auto;column-gap:20px;row-gap:5px}#home .welcome>h1{font-size:36px}
 #home .welcome>.subtitle{font-size:11px}#home #hero{padding:14px 0 0}#home .eyebrow{font-size:8px;letter-spacing:1px}
 #home .sample{width:39px;height:52px}#home .mode-picker button{font-size:12px;min-height:48px}#home .mode-picker span{font-size:9px}
}