@font-face{font-family:Studio Pixel;src:url('./assets/studio-pixel.ttf') format('truetype');font-display:swap}
:root{
  color-scheme:dark;--ink:#151128;--panel:#231c37;--raised:#322641;--edge:#796182;
  --paper:#fff0ca;--soft:#dfd0e4;--muted:#c7b5d2;--gold:#ffd078;--frost:#b2e8ee;--danger:#ff9c7d;
  --pixel:Studio Pixel,'Courier New',monospace;--mono:ui-monospace,'Courier New',monospace;
  --top:env(safe-area-inset-top,0px);--right:env(safe-area-inset-right,0px);
  --bottom:env(safe-area-inset-bottom,0px);--left:env(safe-area-inset-left,0px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{min-width:0;background:var(--ink)}
body{margin:0;background:radial-gradient(ellipse at 45% 0,#45335c 0,#201932 45%,#100d20 85%) fixed;color:var(--paper);font:500 14px/1.35 var(--mono)}
button,input{font:inherit}
button{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  color:var(--paper);background:#302640;border:1px solid #846c8c;border-bottom:3px solid #544361;
  border-radius:2px;padding:4px 7px;cursor:pointer;touch-action:pan-y;text-align:center;
  font:700 12px/1.1 var(--mono);
}
button:not(:disabled):hover{background:#483455;border-color:#bd95ad}
button:not(:disabled):active{background:#503a60;border-bottom-width:1px}
button:disabled{color:#baabc8;background:#251d34;border-color:#5c4c68;cursor:default}
button:focus-visible,input:focus-visible{outline:2px solid var(--frost);outline-offset:2px;z-index:4}
button.primary{background:#ffd078;color:#302036;border:1px solid #fff0ad;border-bottom:4px solid #ac7146;font-family:var(--pixel);font-weight:400;letter-spacing:.02em}
button.primary:not(:disabled):hover{background:#ffe3a1;border-color:#fff6cc}
button.primary:disabled{color:#bfafc9;background:#342842;border-color:#634e70}
.site{width:min(100%,1140px);margin:auto;padding:calc(var(--top) + 4px) calc(var(--right) + 8px) calc(var(--bottom) + 8px) calc(var(--left) + 8px)}
.mast{min-height:32px;display:flex;align-items:center;gap:8px;font:10px/1.2 var(--pixel);text-transform:uppercase;color:#e4d2e8;padding:3px 2px 6px}
.crown-mark{width:14px;height:10px;background:#ffd078;display:inline-block;flex-shrink:0;clip-path:polygon(0 0,21% 0,21% 35%,42% 35%,42% 0,58% 0,58% 35%,79% 35%,79% 0,100% 0,87% 100%,13% 100%)}
.cabinet{position:relative;isolation:isolate;background:var(--panel);border:1px solid var(--edge);box-shadow:0 0 0 2px #100a1f,0 9px 0 #0d0a1b,0 14px 30px #110920b5}
.cabinet.expanded{position:fixed;inset:0;overflow:auto;overscroll-behavior:contain;z-index:10;padding:calc(var(--top) + 4px) calc(var(--right) + 5px) calc(var(--bottom) + 5px) calc(var(--left) + 5px);box-shadow:none;border:0}
.cabinet.expanded #content{max-width:1110px;margin:auto}
body.expanded-body{overflow:hidden}
.cabinet:fullscreen{width:100%;height:100%;background:var(--panel)}
.menu,.story{display:grid}
.scene,.realm-art{position:relative;overflow:hidden;min-width:0;aspect-ratio:3/2;background-color:#21184f;border-bottom:2px solid #8e6d89}
.scene img,.scene canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.scene::after,.realm-art::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px #bb8e8b61,inset 0 -18px 28px -22px #140d26;pointer-events:none}
.realm-art{background-image:url('./assets/realm.png');background-size:200% 200%;image-rendering:pixelated}
.realm-art[data-realm="0"]{background-position:0 0}
.realm-art[data-realm="1"]{background-position:100% 0}
.realm-art[data-realm="2"]{background-position:0 100%}
.realm-art[data-realm="3"]{background-position:100% 100%}
.menu-panel,.story-panel{padding:10px;display:grid;gap:8px;align-content:center;min-width:0}
.lockup h1{margin:0;font:400 clamp(22px,6.4vw,42px)/1.08 var(--pixel);letter-spacing:-.047em;text-transform:uppercase;text-shadow:2px 3px #4d354f}
.lockup span,.lockup em{display:block}
.lockup em{font-style:normal;color:var(--gold)}
.lockup p{margin:6px 0 0;color:#e6cfe9;font-size:12px}
.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.menu-actions .wide{grid-column:1/-1}
.menu-actions:has(#trial:not([hidden])) .wide,.menu-actions:has(#new-journey:not([hidden])) .wide{grid-column:auto}
.credit{font-size:10px;margin:0;color:#c8b3cf;line-height:1.25}
.credit span{white-space:nowrap}
.caption{font:400 9px/1.2 var(--pixel);letter-spacing:.05em;text-transform:uppercase;color:#d4bad8}
.story-panel h2,.quest-head h2{margin:1px 0 0;font:400 17px/1.16 var(--pixel);text-transform:uppercase;color:#ffe6a9}
.story-copy{margin:4px 0 0;color:#eddfed;font-size:12px;line-height:1.32}
.story-tools{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:4px}
.knights,.oath-options{display:grid;gap:4px}
.choice{display:grid;grid-template-columns:34px 1fr;gap:6px;align-items:center;min-height:44px;text-align:left;justify-content:stretch;padding:3px 6px}
.oath-options .choice{grid-template-columns:1fr}
.choice strong{display:block;color:#ffe09c;font:400 11px/1.15 var(--pixel);margin-bottom:2px}
.choice small{display:block;color:#e7d5e9;font:500 10px/1.13 var(--mono)}
.choice:disabled strong,.choice:disabled small{color:#b6a5c4}
.figure{
  display:block;aspect-ratio:1;background-image:url('./assets/figures.png');background-size:300% 200%;
  background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none;
}
.figure.arthur{background-position:0 0}
.figure.briar{background-position:50% 0}
.figure.wisp{background-position:100% 0}
.figure.hollow{background-position:0 100%}
.figure.shield{background-position:50% 100%}
.figure.grail{background-position:100% 100%}
.field{
  --board-edge:min(100%,clamp(246px,51svh,375px),max(246px,calc(100dvh - var(--top) - var(--bottom) - 294px)));
  display:grid;gap:5px;align-content:start;padding:5px 6px 7px;
}
.quest-head{display:flex;align-items:center;justify-content:space-between;gap:4px}
.quest-head h2{font-size:15px}
.quest-count{display:grid;gap:2px;text-align:right;flex-shrink:0;color:#d9c8e1;font-size:10px;line-height:1.12}
.quest-count b{color:var(--gold);font-size:11px}
.board-frame{
  width:var(--board-edge);justify-self:center;display:grid;
  grid-template-columns:12px minmax(0,1fr);grid-template-rows:11px minmax(0,1fr);
}
.coordinates{display:grid;text-align:center;font:8px/1 var(--pixel);color:#cbadc7}
.horizontal{grid-area:1/2;grid-template-columns:repeat(5,1fr)}
.vertical{grid-area:2/1;grid-template-rows:repeat(5,1fr);align-items:center;padding-right:2px}
.board{
  grid-area:2/2;display:grid;width:100%;aspect-ratio:1;grid-template:repeat(5,minmax(0,1fr))/repeat(5,minmax(0,1fr));
  gap:2px;padding:2px;border:1px solid #988493;background:#0f1020;box-shadow:0 3px 0 #100d22;
}
.field{--ground:#293333;--texture:#303d3b;--tile-edge:#4e625b;--walk:#466357}
.field[data-realm="1"]{--ground:#253750;--texture:#2a405d;--tile-edge:#4f6c85;--walk:#3e6371}
.field[data-realm="2"]{--ground:#432b3c;--texture:#4d3143;--tile-edge:#81556b;--walk:#76515a}
.field[data-realm="3"]{--ground:#343251;--texture:#3b395d;--tile-edge:#6b6488;--walk:#595677}
.cell{
  display:grid;position:relative;place-items:center;min-width:0;min-height:0;padding:0;
  border:1px solid var(--tile-edge);border-bottom:2px solid #121828;
  overflow:hidden;background:repeating-linear-gradient(135deg,var(--ground) 0 3px,var(--texture) 3px 6px);
}
.cell.open{background:var(--walk);border-color:#c8c6a2;border-bottom-color:#6a7a68}
.cell.open::before,.cell.leap::before{content:'';position:absolute;right:3px;top:3px;width:5px;height:5px;background:#eee7a7;box-shadow:1px 1px #233336;z-index:2}
.cell.leap{background:#364679;border:2px solid #c3c5ff}
.cell.leap::before{background:#d2c7ff}
.cell.danger::after,.cell.hazard::after{content:'';position:absolute;inset:1px;pointer-events:none;z-index:3}
.cell.danger::after{border:2px solid #f5a077;background:repeating-linear-gradient(135deg,#fe8f631e 0 4px,transparent 4px 9px)}
.cell.hazard:not(.danger)::after{border:2px dotted #d2abff}
.cell.player{background:#51496b;border-color:#ffe0a0}
.cell:focus-visible{outline-offset:-3px}
.cell .figure{position:absolute;width:90%;height:90%;bottom:1%;left:5%;z-index:2}
.cell .figure.enemy{animation:shade-step 1.6s steps(2,jump-none) infinite}
.cabinet.quiet .figure.enemy{animation-duration:4.8s}
@keyframes shade-step{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.cell .unit-hp,.cell .hit-num{position:absolute;z-index:4;font:700 9px/1 var(--mono);color:#fff3d1;background:#24182de8;padding:2px}
.cell .unit-hp{bottom:1px;left:1px}
.cell .hit-num{top:1px;right:1px;color:#ffd4b8}
.cell.wall{background:repeating-linear-gradient(0deg,#252138 0 4px,#49374e 4px 5px,#30273e 5px 9px);border-color:#64556d}
.cell.shallows{background:repeating-linear-gradient(0deg,#2d4b6a 0 4px,#436a88 4px 5px,#314f73 5px 10px)}
.cell.shallows.flood{background:repeating-linear-gradient(0deg,#192f57 0 3px,#365b9a 3px 5px,#1f3a67 5px 8px)}
.cell.briars{background:repeating-linear-gradient(135deg,#3b2649 0 4px,#59385c 4px 6px)}
.cell.gate{background:repeating-linear-gradient(90deg,#39252f 0 5px,#ad7458 5px 7px)}
.cell.gate.raised{background:#584752}
.symbol{position:absolute;display:block;width:45%;height:47%;pointer-events:none;z-index:1}
.symbol.ward{background:#ffd57e;clip-path:polygon(50% 0,78% 25%,78% 74%,100% 74%,100% 93%,0 93%,0 74%,22% 74%,22% 25%);box-shadow:inset -6px 0 #ad784e}
.symbol.ward.lit{background:#a9f2df;box-shadow:inset -6px 0 #518c8d}
.symbol.banner{background:#ff9a91;clip-path:polygon(0 0,100% 0,100% 85%,70% 68%,50% 100%,30% 68%,0 85%);box-shadow:inset -6px 0 #ad575e}
.symbol.exit{height:50%;width:50%;border:4px solid #bd9abb;border-bottom-width:2px;border-radius:10px 10px 0 0;background:#211c33;box-shadow:inset 0 0 0 2px #614665}
.symbol.exit.ready{border-color:#ffe29a;background:#3a555e}
.symbol.plate{height:28%;width:52%;background:#c89358;border:2px solid #f4d28d;box-shadow:0 2px #6e4d50}
.symbol.briar{height:36%;width:48%;background:#c27ebb;clip-path:polygon(0 20%,24% 48%,35% 11%,48% 52%,66% 2%,74% 57%,100% 20%,87% 90%,14% 90%)}
.symbol.wave{height:16%;width:55%;background:#a6d9e0;clip-path:polygon(0 37%,27% 37%,27% 0,54% 0,54% 37%,79% 37%,79% 75%,100% 75%,100% 100%,58% 100%,58% 65%,23% 65%,23% 93%,0 93%)}
.field-controls{display:grid;gap:4px;min-width:0}
.vitals{display:flex;align-items:center;justify-content:space-between;gap:4px;border:1px solid #6c5676;background:#2c213c;padding:3px 5px;min-height:25px}
#hearts{display:flex;gap:4px}
.heart{width:12px;height:11px;background:#705b75;clip-path:polygon(0 16%,17% 16%,17% 0,40% 0,40% 17%,60% 17%,60% 0,83% 0,83% 16%,100% 16%,100% 61%,83% 61%,83% 77%,65% 77%,65% 92%,50% 100%,35% 92%,35% 77%,17% 77%,17% 61%,0 61%)}
.heart.full{background:#f89897}
#resolve{font:10px/1 var(--pixel);color:#ffdf9a;white-space:nowrap}
.weather,.status{margin:0;line-height:1.15;font-size:11px}
.weather{color:#e0c8ed;min-height:14px;padding-left:3px}
.status{color:#f5e2eb;background:#2a2039;border-left:2px solid #ad7898;padding:4px;min-height:29px;display:grid;align-items:center}
.game-actions,.game-tools{display:grid;gap:4px}
.game-actions{grid-template-columns:repeat(3,minmax(44px,1fr))}
.game-tools{grid-template-columns:repeat(4,minmax(44px,1fr))}
.game-actions button,.game-tools button{padding-inline:2px}
.shade{position:absolute;inset:0;z-index:5;display:grid;justify-items:center;align-items:start;padding:5px;background:#100b20d6}
.expanded .shade{position:fixed;padding:calc(var(--top) + 5px) calc(var(--right) + 5px) calc(var(--bottom) + 5px) calc(var(--left) + 5px)}
.dialog{
  width:min(100%,560px);padding:9px;max-height:calc(100dvh - var(--top) - var(--bottom) - 47px);
  overflow:auto;overscroll-behavior:contain;background:#281e3b;border:2px solid #a77e9c;box-shadow:4px 5px #140c23
}
.expanded .dialog{max-height:calc(100dvh - var(--top) - var(--bottom) - 12px)}
.dialog-header{position:sticky;top:0;z-index:4;background:#281e3b;display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:6px;border-bottom:1px solid #775d80;padding-bottom:5px}
.dialog-header button{flex-shrink:0}
.dialog h2{margin:0;color:#ffe2a4;font:400 15px/1.25 var(--pixel);text-transform:uppercase}
.dialog p{font-size:12px;line-height:1.33;color:#e8d8ec;margin:5px 0 8px}
.dialog > :last-child{margin-bottom:0}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}
.dialog-actions .wide{grid-column:1/-1}
.rules{display:grid;gap:5px;margin:6px 0;padding:0;list-style:none}
.rules li,.receipt-item{padding:6px;border:1px solid #685175;background:#342545;color:#ecd8ed;font-size:12px}
.rules strong,.receipt-item strong{color:#ffdf9b}
.receipt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.receipt-item strong{display:block;font:400 17px/1.1 var(--pixel)}
.setting-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px;margin:4px 0}
.setting-row input{width:min(36vw,165px);height:44px;accent-color:#ffd078}
.notice{border-left:3px solid #ffc77d;padding-left:6px}
.storage-warning{position:fixed;z-index:30;bottom:calc(var(--bottom) + 3px);left:4px;right:4px;background:#6c3d52;padding:6px;margin:0;color:#fff2cc}
@media (orientation:portrait) and (max-height:730px){
  .scene,.realm-art{aspect-ratio:1.9}
}
@media (orientation:portrait) and (max-height:610px){
  .scene,.realm-art{aspect-ratio:2.2}
  .field{--board-edge:min(100%,clamp(246px,45svh,275px),max(246px,calc(100dvh - var(--top) - var(--bottom) - 294px)))}
  .mast{min-height:26px}
  .menu-panel,.story-panel{padding:7px;gap:6px}
  .field{gap:3px;padding-block:3px 5px}
  .field-controls{gap:3px}
}
@media (orientation:portrait) and (max-height:535px){
  .site:has(.field:not([hidden])) .mast{display:none}
  .field{gap:2px}
  .status,.weather{font-size:10px}
}
@media (min-width:700px) and (min-height:550px){
  .site{padding-top:calc(var(--top) + 15px)}
  .mast{min-height:38px}
  .menu,.story{grid-template-columns:1.28fr minmax(0,1fr)}
  .scene,.realm-art{aspect-ratio:1.18;border-bottom:0;border-right:2px solid #8d6c89}
  .menu-panel,.story-panel{padding:clamp(12px,2.45vw,34px);gap:13px}
  .lockup h1{font-size:clamp(23px,3.1vw,42px)}
  .lockup p,.story-copy{font-size:14px}
  .menu-actions{gap:7px}
  .menu-actions button{min-height:48px}
  .story-panel h2{font-size:22px}
  .field{width:min(100%,865px);margin:auto;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;padding:16px;gap:11px;--board-edge:min(100%,clamp(250px,63svh,455px))}
  .quest-head{grid-column:1/-1}
  .quest-head h2{font-size:21px}
  .board-frame{justify-self:start}
  .field-controls{align-self:center;gap:7px}
  .vitals{min-height:39px;padding:7px}
  .heart{width:16px;height:15px}
  .status,.weather{font-size:13px}
  .status{min-height:42px}
  .shade{padding-top:15px}
}
@media (orientation:landscape) and (max-height:549px){
  .site{padding-top:calc(var(--top) + 3px);padding-bottom:calc(var(--bottom) + 5px)}
  .mast{min-height:20px;font-size:8px;padding-block:0 3px}
  .menu,.story{grid-template-columns:1.1fr minmax(0,1fr)}
  .scene,.realm-art{height:clamp(229px,calc(100dvh - var(--top) - var(--bottom) - 33px),390px);aspect-ratio:auto;border-bottom:0;border-right:2px solid #8d6c89}
  .menu-panel,.story-panel{padding:5px 7px;gap:4px}
  .lockup h1{font-size:clamp(14px,3.2vw,26px)}
  .lockup p{font-size:10px;margin-top:3px}
  .menu-actions,.story-tools,.knights,.oath-options{gap:3px}
  .menu-actions button,.story-tools button{padding-inline:2px;font-size:11px}
  .credit{font-size:8px}
  .story-panel h2{font-size:14px}
  .story-copy{font-size:10px;line-height:1.2}
  .choice strong{font-size:10px}
  .choice small{font-size:9px}
  .choice{grid-template-columns:30px 1fr;padding-block:2px}
  .field{
    --board-edge:min(100%,clamp(246px,calc(100dvh - var(--top) - var(--bottom) - 42px),405px));
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;
    padding:3px 4px 4px;gap:3px 6px;
  }
  .quest-head{grid-area:1/2;min-height:24px}
  .quest-head h2{font-size:12px}
  .board-frame{grid-area:1/1/3/2}
  .field-controls{grid-area:2/2;align-content:start;gap:3px}
  .status,.weather{font-size:10px}
  .status{min-height:25px}
  .dialog{max-height:calc(100dvh - var(--top) - var(--bottom) - 31px)}
}
@media (orientation:landscape) and (max-height:335px){
  .mast{display:none}
  .site{padding-inline:calc(var(--left) + 4px) calc(var(--right) + 4px)}
  .field{--board-edge:min(100%,clamp(246px,calc(100dvh - var(--top) - var(--bottom) - 17px),325px))}
  .scene,.realm-art{height:clamp(223px,calc(100dvh - var(--top) - var(--bottom) - 11px),334px)}
  .lockup h1{font-size:clamp(13px,2.45vw,22px)}
  .dialog{max-height:calc(100dvh - var(--top) - var(--bottom) - 17px)}
  .receipt{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (orientation:landscape) and (max-width:640px) and (min-width:550px) and (max-height:549px){
  .field{grid-template-columns:minmax(246px,1fr) minmax(188px,1fr)}
  .game-actions button,.game-tools button{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .figure.enemy{animation-duration:4.8s}
}