/* Sugar Block Works on the web: the app's night-market palette (Theme.swift) on
   the Handeware kit. The kit's tokens are re-pointed at navy, neon and lemon so
   its cards, pills, jewels and toggles take the candy look. System type only. */
:root{
  --lacquer:#0B1A3D;--lacquer-hi:#142A5C;--ink:#FFFFFF;--ink-soft:#C8D6FF;--ink-dim:#8FA6E0;
  --hair:rgba(98,204,255,.38);--brass:#FFD84D;--brass-lo:#F0B429;--brass-hi:#FFF1A8;
  --jade:#2FBF8F;--jade-deep:#1E8F6B;--pick:#FFD84D;
  --neon:#3DA9FF;--neon-hi:#62CCFF;--mint:#7CF2C4;--pink:#FF6FB1;--card2:#1D3A7A;
  --serif:ui-rounded,"SF Pro Rounded",Nunito,Quicksand,system-ui,"Segoe UI",sans-serif;
  --sans:var(--serif);
}
body{background:#0B1A3D;font-weight:600;font-family:var(--serif)}
.table{background:radial-gradient(120% 70% at 50% 0%,#2A66C9 0%,#1C4C9E 30%,#10286A 62%,#0B1A3D 100%)}
.table::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:url(assets/skyline.svg) center bottom/auto 100% repeat-x;opacity:.9;pointer-events:none}

/* the kit's gold pill becomes the app's lemon button */
.pill{color:#1A1400;font-family:var(--serif);font-weight:800;box-shadow:0 1px 0 #fff9 inset,0 4px 0 #B07C0B,0 8px 16px rgba(0,0,0,.4);min-height:48px}
.pill:active{box-shadow:0 1px 0 #fff9 inset,0 2px 0 #B07C0B,0 4px 10px rgba(0,0,0,.35)}
.pill.neon{background:linear-gradient(180deg,#62CCFF,#1E9BFF);color:#04122E;box-shadow:0 1px 0 #fff8 inset,0 4px 0 #0F5FB0,0 8px 16px rgba(0,0,0,.4)}
.pill svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.pill.small{padding:.55em 1.2em;font-size:1em}
.pill:disabled{opacity:.55}
.jewel{border-color:var(--neon);background:radial-gradient(circle at 35% 30%,#2A5AB0,#0F2A66 70%);box-shadow:0 0 0 3px #0B1A3D,0 6px 14px rgba(0,0,0,.45);min-width:44px;min-height:44px}
.jewel svg{stroke:#fff}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.choice:focus-visible,.toggle:focus-visible,.row:focus-visible,.crew:focus-visible,.lv:focus-visible,.slotbtn:focus-visible{outline:3px solid var(--brass-hi);outline-offset:3px}
.card{background:linear-gradient(180deg,#1D3A7A,#142A5C 40%);box-shadow:0 0 0 4px #0B1A3D,0 20px 50px rgba(0,0,0,.6)}
.card h2{font:800 1.5em/1.15 var(--serif);font-style:normal;color:var(--brass)}
.card .x{min-width:44px;min-height:44px;right:.3em;top:.3em}
.card .actions .pill{width:100%;max-width:18em}
.toggle[aria-pressed=true]{background:var(--jade)}
.choice{min-height:44px}
.choice[aria-pressed=true]{color:#1A1400}
.link{color:var(--neon-hi);min-height:44px}
.row{min-height:48px;color:var(--ink)}
.toast{background:#142A5C;color:#fff}

/* ------------------------------------------------------------- home */
.home{align-items:center;justify-content:flex-start;gap:1em;padding:1.2em 1.2em 0;text-align:center}
.hero{text-align:center;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;padding-bottom:3.5em;width:100%;position:relative}
.logo{margin:0;font-family:var(--serif);font-weight:900;line-height:.92;color:#fff;letter-spacing:.005em;font-size:clamp(2.6em,13vw,4.6em);
  text-shadow:0 3px 0 #0F5FB0,0 0 22px rgba(61,169,255,.8),0 8px 24px rgba(0,0,0,.45)}
.logo span{display:block}
.logo small{display:block;font-size:.3em;letter-spacing:.5em;color:var(--brass);margin-top:.5em;text-shadow:0 2px 8px rgba(0,0,0,.5);padding-left:.5em}
.cast{display:flex;gap:.2em;align-items:flex-end;justify-content:center;height:clamp(110px,22vh,170px);margin:.2em 0}
.crew{position:relative;background:none;border:0;padding:0 .2em;height:100%;display:flex;align-items:flex-end;touch-action:manipulation}
.crew img{height:100%;width:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:transform .2s}
.crew:nth-child(2) img{height:88%}
.crew:active img,.crew.talk img{transform:translateY(-6px) rotate(-2deg)}
.crew .bubble{bottom:calc(100% + 4px)}
.bubble{position:absolute;left:50%;transform:translateX(-50%);width:max-content;text-align:center;line-height:1.2;background:#FFF5D6;color:#2B1B10;border:2px solid #2B1B10;border-radius:999px;
  padding:.35em .9em;font-weight:900;font-size:.9em;z-index:8;animation:bub 1.8s both;pointer-events:none;max-width:min(88vw,22em);border-radius:18px}
.bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#2B1B10}
@keyframes bub{0%{opacity:0;transform:translateX(-50%) scale(.4)}12%{opacity:1;transform:translateX(-50%) scale(1.06)}20%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
.menu{display:flex;flex-direction:column;gap:.7em;align-items:center;width:min(100%,20em)}
.menu .pill{width:100%}
.menu .pair{display:flex;gap:.6em;width:100%}
.menu .pair .pill{flex:1;padding-left:.6em;padding-right:.6em;font-size:1em}
.streak{color:var(--ink-soft)}
.tagline{color:#fff}
.hero .more{color:var(--brass)}
.about{background:rgba(11,26,61,.92);color:#fff}
.about h2{font:800 1.2em/1.2 var(--serif);font-style:normal;color:var(--brass)}
.about p{color:#E6EDFF}
.foot{color:var(--ink-soft)}
.foot a{color:var(--neon-hi)}
.foot-row{display:flex;gap:1em;justify-content:center;flex-wrap:wrap}

/* ------------------------------------------------------------- game */
#game{overflow:hidden;align-items:center;padding:max(.5em,env(safe-area-inset-top)) max(.7em,env(safe-area-inset-right)) max(.6em,env(safe-area-inset-bottom)) max(.7em,env(safe-area-inset-left));gap:.4em}
.gbar{display:flex;align-items:center;gap:.6em;width:min(100%,560px);flex:none}
.gbar .jewel{width:46px;height:46px;flex:none}
.goal{flex:1;min-width:0;background:rgba(11,26,61,.78);border:1.5px solid var(--hair);border-radius:14px;padding:.35em .8em .45em}
.goal b{display:flex;justify-content:space-between;gap:.5em;font-size:.95em;line-height:1.25;font-weight:800}
.goal b span:last-child{color:var(--mint);white-space:nowrap}
.goal b span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meter{height:7px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:.3em}
.meter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#3DA9FF,#7CF2C4);transition:width .35s}
.hud{display:flex;align-items:center;gap:.7em;width:min(100%,560px);flex:none}
.score{font-weight:900;font-size:1.5em;font-variant-numeric:tabular-nums;line-height:1;min-width:3.6em}
.score small{display:block;font-size:.42em;letter-spacing:.2em;color:var(--ink-soft);font-weight:800;margin-bottom:.2em}
.power{flex:1;min-width:0;display:flex;align-items:center;gap:.5em;position:relative}
.power .av{width:42px;height:42px;flex:none;position:relative}
.power .av img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.power .pw{flex:1;min-width:0}
.power small{display:block;font-size:.62em;letter-spacing:.18em;color:var(--ink-soft);font-weight:800;line-height:1.3}
.power .meter i{background:linear-gradient(90deg,#4BD4A6,#7CF2C4);transition:width .4s}
.power.full .meter i{background:linear-gradient(90deg,#FFD84D,#FF6FB1)}
.coachrow{position:relative;min-height:2.1em;width:min(100%,560px);flex:none;display:grid;place-items:center}
.coachrow.talking .coach{visibility:hidden}
.coach{margin:0;color:var(--brass-hi);font-size:.9em;font-weight:800;text-align:center;line-height:1.2}
.coachrow .bubble{left:50%;top:50%;bottom:auto;animation-name:bub3}
.coachrow .bubble::after{display:none}
@keyframes bub3{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}20%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}
.play{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:.5em}
.stage{flex:1;min-height:0;width:100%;display:grid;place-items:center;position:relative}
.side{flex:none;width:min(100%,560px);display:flex;flex-direction:column;gap:.4em}

/* the board: the kit's absolute .board is reset (it collapsed Sudoku) */
.board{position:relative;left:auto;top:auto;width:var(--side,320px);height:var(--side,320px);flex:none;border-radius:calc(var(--side,320px)*.045);
  background:rgba(18,41,102,.94);box-shadow:0 0 0 2px rgba(61,169,255,.8),0 0 22px rgba(61,169,255,.45),0 14px 30px rgba(0,0,0,.45);touch-action:none;-webkit-user-select:none;user-select:none;outline:none;overflow:hidden}
.board:focus-visible{box-shadow:0 0 0 3px var(--brass-hi),0 0 22px rgba(255,216,77,.5)}
.well{position:absolute;inset:calc(var(--side,320px)*.0125);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.sl{position:relative}
.sl::before{content:"";position:absolute;inset:5.5%;border-radius:26%;background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)) 12% 8%/76% 30% no-repeat,rgba(46,84,168,.36)}
.sl.pv::after{content:"";position:absolute;inset:0;background:url(assets/tiles.webp) 0 0/1000% 100%;background-position:calc(var(--i)*100%/9) 0;opacity:.55}
.sl.bad::before{background:rgba(255,80,110,.4)}
.sl.glow::before{box-shadow:0 0 0 2px #FFDD29,0 0 10px rgba(255,221,41,.9);background:rgba(255,221,41,.28)}
.sl.cur::before{box-shadow:0 0 0 2px #fff}
.layer{position:absolute;inset:calc(var(--side,320px)*.0125);pointer-events:none}
.t{position:absolute;left:0;top:0;width:12.5%;height:12.5%;background:url(assets/tiles.webp) 0 0/1000% 100%;background-position:calc(var(--i)*100%/9) 0;
  transform:translate(calc(var(--x)*100%),calc((7 - var(--y))*100%));will-change:transform}
.t.fall{transition:transform .3s cubic-bezier(.45,0,.95,.55)}
.t.new{animation:land .22s ease-out both}
@keyframes land{0%{scale:.55;opacity:.4}70%{scale:1.08}100%{scale:1;opacity:1}}
.t.fr::after,.t.ch::after{content:"";position:absolute;inset:0;background:url(assets/tiles.webp) 0 0/1000% 100%}
.t.fr::after{background-position:calc(8*100%/9) 0}
.t.ch::after{background-position:100% 0}
.t.out{animation:out .3s ease-in forwards}
@keyframes out{0%{filter:brightness(1.6) saturate(1.4);scale:1}40%{filter:brightness(2.2);scale:1.18}100%{filter:brightness(2.6);scale:.2;opacity:0}}
.t.crack::after{animation:crack .35s ease-out forwards}
@keyframes crack{0%{scale:1;opacity:1}100%{scale:1.5;opacity:0}}
.fx{position:absolute;left:0;right:0;top:36%;text-align:center;pointer-events:none;z-index:6;font-weight:900;color:#fff;font-size:calc(var(--side,320px)*.085);
  text-shadow:0 3px 0 #0F5FB0,0 0 16px rgba(61,169,255,.9),0 4px 14px rgba(0,0,0,.5);animation:fx 1.1s ease-out forwards;line-height:1.05;padding:0 .3em}
.fx.hot{color:#FFE680;text-shadow:0 3px 0 #B07C0B,0 0 18px rgba(255,200,40,.9),0 4px 14px rgba(0,0,0,.5)}
.fx small{display:block;font-size:.5em;color:var(--mint);letter-spacing:.06em;margin-top:.2em}
@keyframes fx{0%{opacity:0;transform:translateY(14px) scale(.6)}16%{opacity:1;transform:translateY(0) scale(1.08)}28%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
.shake{animation:shk .25s}
@keyframes shk{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* the tray */
.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;align-items:stretch}
.slotbtn{position:relative;background:rgba(11,26,61,.9);border:1.5px solid var(--hair);border-radius:16px;padding:0;display:grid;place-items:center;min-height:var(--trayh,92px);touch-action:none;-webkit-user-select:none;user-select:none;color:#fff}
.slotbtn.sel{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass),0 0 16px rgba(255,216,77,.55)}
.slotbtn.dead .pc{opacity:.35;filter:grayscale(.7)}
.slotbtn.lift .pc{opacity:.25}
.slotbtn:disabled{cursor:default}
.slotbtn.fresh .pc{animation:land .28s ease-out both}
.pc{position:relative;width:calc(var(--w)*var(--c));height:calc(var(--h)*var(--c));pointer-events:none}
.pc i{position:absolute;width:var(--c);height:var(--c);left:calc(var(--px)*var(--c));top:calc((var(--h) - 1 - var(--py))*var(--c));background:url(assets/tiles.webp) 0 0/1000% 100%;background-position:calc(var(--i)*100%/9) 0}
.pc.ghost{position:fixed;left:0;top:0;z-index:40;pointer-events:none;opacity:.94;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));will-change:transform}
.tag{position:absolute;right:6px;top:4px;font-size:.62em;font-weight:900;letter-spacing:.08em;color:#FFE680;text-shadow:0 1px 3px #000}
.dock{display:flex;gap:.6em;justify-content:center;padding:.1em 0 0;flex-wrap:wrap}
.dock .pill{min-width:9.5em}
.chipwarn{align-self:center;background:var(--pink);color:#0B1A3D;font-weight:900;font-size:.8em;border-radius:99px;padding:.15em .9em;letter-spacing:.05em;animation:fx2 .5s}
@keyframes fx2{from{transform:scale(.6);opacity:0}}
.stars{display:flex;justify-content:center;gap:.3em;margin:.2em 0 .6em}
.stars svg{width:2.6em;height:2.6em}
.stars .on{fill:#FFD84D;stroke:#B07C0B}
.stars .off{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.3)}
.stars svg{stroke-width:1.5;stroke-linejoin:round}
.stars svg:nth-child(2){margin-top:-.4em}
.big{font:900 2.2em/1 var(--serif);text-align:center;margin:.1em 0 .2em;font-variant-numeric:tabular-nums}

/* the map of streets */
.street{margin:.2em 0 1em}
.street h3{margin:0;font-size:1.05em;font-weight:900;color:var(--brass)}
.street p{margin:0 0 .5em;font-size:.8em;color:var(--ink-soft);font-weight:600}
.lvgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:.4em}
.lv{position:relative;min-height:48px;border-radius:12px;border:1.5px solid var(--hair);background:rgba(61,169,255,.16);font-weight:900;font-size:1.05em;padding:.2em 0 .1em;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.lv small{font-size:.6em;letter-spacing:.05em;color:var(--brass);height:1em}
.lv.done{background:rgba(124,242,196,.2);border-color:rgba(124,242,196,.6)}
.lv.next{background:var(--brass);color:#1A1400;border-color:#fff}
.lv.next small{color:#7a4f00}
.lv:disabled{opacity:.4}
.tut{display:flex;gap:.8em;align-items:center;text-align:left;margin:.1em 0 .8em}
.tut i{flex:none;width:44px;height:44px;background:url(assets/tiles.webp) 0 0/1000% 100%;background-position:calc(var(--i)*100%/9) 0}
.tut b{display:block;color:var(--brass);font-weight:900}
.tut span{display:block;font-size:.9em;color:#E6EDFF;line-height:1.3}
.langs{max-height:40vh;overflow:auto;margin-top:.4em}

/* landscape on a phone: the tray moves beside the board */
@media (orientation:landscape) and (max-height:520px){
  #game{gap:.25em}
  .play{flex-direction:row;align-items:stretch;justify-content:center;gap:1em}
  .stage{width:auto;flex:1;min-width:0}
  .side{width:min(38%,300px);flex:none;align-self:center}
  .coachrow{min-height:1.5em}
  .gbar .jewel{width:40px;height:40px;min-width:40px;min-height:40px}
  .tray{grid-template-columns:1fr;grid-auto-rows:1fr}
  .power small{display:none}
  .gbar,.hud{width:min(100%,900px)}
  .dock .pill{min-width:0;flex:1}
}
@media (max-width:420px){.dock .pill{min-width:0;flex:1;padding-left:.6em;padding-right:.6em}}
@media (prefers-reduced-motion:reduce){.t.new,.slotbtn.fresh .pc,.fx,.bubble{animation-duration:.01s!important}}

.more{text-align:center}
.more svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}

:lang(ja){--serif:ui-rounded,"Hiragino Maru Gothic ProN",system-ui,sans-serif}
.board,.pc{direction:ltr}