:root{
  --red:#aa1f18;
  --gold:#d9a340;
  --navy:#061a2f;
  --paper:#fff0c9;
  --ink:#2b1812;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;font-family:"Zen Kaku Gothic New",system-ui,sans-serif;background:#06111f;color:var(--ink);overflow-x:hidden}
button,a{font:inherit}
button{cursor:pointer}
.back-link{position:fixed;z-index:50;top:12px;left:12px;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(255,240,201,.94);border:1px solid rgba(217,163,64,.55);color:#3a1d10;text-decoration:none;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.app{min-height:100svh;display:grid;place-items:center;padding:12px;background:#06111f}
.screen{position:relative;width:min(100%,1600px);aspect-ratio:16/9;max-height:calc(100svh - 24px);overflow:hidden;border:1px solid rgba(217,163,64,.45);box-shadow:0 30px 90px rgba(0,0,0,.42);background:#071827}
.screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,22,.1),rgba(5,12,22,.36));z-index:1}
.screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;background:url("./img/generated/ui/deco-wave-front.png") bottom center/100% 100% no-repeat;z-index:2;pointer-events:none}
.title-screen{background:url("./img/generated/bg/bg-title-desktop.png") center/cover no-repeat}
.game-screen{background:url("./img/generated/bg/bg-game-desktop.png") center/cover no-repeat}
.result-screen{background:url("./img/generated/bg/bg-result-desktop.png") center/cover no-repeat}
.title-panel{position:absolute;z-index:3;left:50%;top:6%;transform:translateX(-50%);width:min(58%,940px);min-height:280px;padding:66px 86px 46px;background:url("./img/generated/ui/panel-title.png") center/100% 100% no-repeat}
.eyebrow{margin:0 0 10px 8px;color:#b72d21;font-size:13px;font-weight:900;letter-spacing:.1em}
h1,h2{font-family:"Shippori Mincho",serif;margin:0;letter-spacing:0}
h1{font-size:clamp(54px,4.8vw,84px);line-height:1;color:#aa241c;text-shadow:0 2px 0 #fff4d1,0 16px 28px rgba(0,0,0,.18);white-space:nowrap}
.lead{margin:20px 0 22px 8px;font-size:clamp(18px,1.55vw,25px);font-weight:900;line-height:1.6;color:#39231d}
.asset-button{position:relative;border:0;background:transparent;color:#fff4dc;text-decoration:none;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.35);display:inline-grid;place-items:center;min-width:230px;min-height:64px;padding:0 30px}
.asset-button span{transform:translateY(-1px)}
.asset-button::before{content:"";position:absolute;inset:0;background:center/100% 100% no-repeat;z-index:-1}
.primary::before{background-image:url("./img/generated/ui/btn-primary.png")}
.secondary::before{background-image:url("./img/generated/ui/btn-secondary.png")}
.evo-rail{position:absolute;z-index:4;left:10%;right:10%;bottom:15%;height:24%;display:flex;align-items:center;justify-content:space-around;gap:18px;padding:28px 80px;background:linear-gradient(180deg,rgba(97,50,22,.98),rgba(32,13,7,.98));border:7px solid #7b4822;box-shadow:0 28px 54px rgba(0,0,0,.48),inset 0 0 0 2px rgba(255,222,130,.28)}
.evo-rail::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,218,124,.3);pointer-events:none}
.evo-rail .mini-crab{position:relative;display:grid;place-items:center;min-width:0;flex:1}
.evo-rail .mini-crab:not(:last-child)::after{content:"";position:absolute;right:-24px;top:50%;width:34px;height:18px;transform:translateY(-50%);background:#ffd77d;clip-path:polygon(0 28%,68% 28%,68% 0,100% 50%,68% 100%,68% 72%,0 72%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.demo-note{position:absolute;z-index:3;left:50%;bottom:9px;transform:translateX(-50%);width:min(94%,1000px);margin:0;text-align:center;font-size:11px;font-weight:800;color:rgba(255,246,222,.78);text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}

.left-hud,.evo-hud{position:absolute;z-index:4;top:5%;bottom:8%;width:22%;padding:26px 22px;background:center/100% 100% no-repeat}
.left-hud{left:3%;background-image:url("./img/generated/ui/panel-left-hud.png")}
.evo-hud{right:3%;background-image:url("./img/generated/ui/panel-evolution.png");padding:42px 26px 34px}
.score-box,.next-box{position:relative;color:#fff4dc;text-align:center;margin:0 auto 14px;padding:14px;border-radius:14px;background:rgba(28,6,4,.78);border:1px solid rgba(218,164,65,.7)}
.score-box span,.next-box span{display:block;color:#ffd879;font-size:13px;font-weight:900}
.score-box strong{display:block;font:800 54px/1 "Shippori Mincho",serif}
#nextCanvas{display:block;width:min(100%,160px);height:auto;margin:6px auto}
#nextName{font-size:18px}
.play-wrap{position:absolute;z-index:3;left:25%;top:3%;width:50%;height:84%;display:grid;place-items:center;padding:34px 48px 38px;background:linear-gradient(180deg,#b07239,#5e341a 8%,#231109 94%,#110704);border:8px solid #845029;box-shadow:0 28px 64px rgba(0,0,0,.54),inset 0 0 0 3px rgba(255,224,137,.22)}
.play-wrap::before{content:"";position:absolute;inset:17px;border:2px solid rgba(255,224,137,.24);pointer-events:none}
#gameCanvas{position:relative;z-index:2;display:block;width:min(68vh,520px);height:min(84vh,690px);max-width:100%;max-height:100%;border-radius:18px;background:linear-gradient(180deg,rgba(17,55,78,.88),rgba(6,22,35,.94));border:9px solid #8e592f;box-shadow:0 24px 54px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,226,143,.34);touch-action:none}
.drop-guide{position:absolute;z-index:5;top:28px;height:82%;border-left:3px dashed rgba(255,234,177,.78);pointer-events:none}
.toast{position:absolute;z-index:8;top:14%;left:50%;transform:translateX(-50%);min-width:260px;min-height:56px;display:grid;place-items:center;padding:0 24px;color:#fff4dc;font-weight:900;opacity:0;transition:opacity .18s ease,transform .18s ease;text-shadow:0 2px 0 rgba(0,0,0,.35);background:url("./img/generated/ui/chip-toast.png") center/100% 100% no-repeat;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-8px)}
.evo-hud h2{height:34px;margin:0 0 7px;display:grid;place-items:center;color:#fff4dc;font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.evolution{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.evolution li{display:grid;grid-template-columns:26px 36px 1fr 32px;align-items:center;gap:5px;min-height:35px;padding:2px 6px;border-radius:7px;background:rgba(24,7,4,.72);border:1px solid rgba(218,164,65,.58);color:#fff2d2;font-weight:900}
.evolution li.is-best{background:linear-gradient(180deg,rgba(255,217,111,.92),rgba(128,54,21,.9));color:#2d1309}
.badge{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#c12b20;color:#fff;border:2px solid #ffe3a4;font-size:11px}
.evo-icon{width:34px;height:34px;object-fit:contain}
.evo-name{font-size:11px}.evo-size{font-size:10px;opacity:.78}

.result-panel{position:absolute;z-index:3;left:4%;top:9%;width:47%;padding:58px 58px 38px;background:url("./img/generated/ui/panel-result-title.png") top center/100% 190px no-repeat,linear-gradient(180deg,rgba(5,21,38,.94),rgba(5,21,38,.86));border:2px solid rgba(218,164,65,.75);box-shadow:0 26px 58px rgba(0,0,0,.38)}
.result-panel h2{font-size:clamp(42px,4.3vw,78px);line-height:1.05;color:#fff4dc;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.result-score{margin:26px 0 6px;display:flex;align-items:center;gap:18px;color:#fff4dc}.result-score span{font-weight:900;color:#ffd879}.result-score strong{font:800 58px/1 "Shippori Mincho",serif;color:#fff}
#bestCanvas{width:220px;height:190px;float:right;margin:0 0 10px 18px}
#resultLead{font-weight:900;line-height:1.8;color:#fff2d2}
.result-actions{clear:both;display:flex;gap:12px;flex-wrap:wrap}
.result-list{position:absolute;z-index:4;right:4%;top:8%;bottom:11%;width:44%;list-style:none;margin:0;padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:url("./img/generated/ui/panel-result-list.png") center/100% 100% no-repeat;overflow:auto}
.result-list li{display:grid;grid-template-columns:36px 58px 1fr;gap:8px;align-items:center;min-height:66px;padding:8px;border-radius:10px;background:rgba(255,239,197,.84);font-weight:900}
.result-list img{width:56px;height:56px;object-fit:contain}

@media (max-width:1280px){
  .app{padding:0}.screen{width:100%;min-height:100svh;max-height:none;aspect-ratio:auto;border:0;overflow:auto}
  .screen::after{height:8%;z-index:2}
  .title-screen,.game-screen{background-image:url("./img/generated/bg/bg-mobile-harbor.png")}
  .result-screen{background-image:url("./img/generated/bg/bg-mobile-result.png")}
  .title-screen{padding:74px 14px 34px;display:flex;flex-direction:column;gap:18px}.title-panel,.left-hud,.evo-hud,.play-wrap,.result-panel,.result-list{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
  .title-panel{transform:none;margin:0 auto;width:min(100%,820px);padding:56px 86px 42px;min-height:260px}.evo-rail{position:relative;z-index:8;left:auto;right:auto;bottom:auto;width:min(100%,760px);height:116px;margin:auto auto 0;gap:8px;padding:14px 22px}.evo-rail canvas{max-width:112px!important;height:auto!important}
  .game-screen{padding:58px 12px 66px;display:flex;flex-direction:column;gap:12px}.left-hud{order:1;display:grid;grid-template-columns:minmax(130px,1fr) minmax(190px,1.3fr) minmax(180px,.8fr);gap:10px;padding:0;min-height:0;background:none}.score-box,.next-box{margin:0;min-height:142px;display:grid;place-items:center}.left-hud .secondary{align-self:stretch;min-width:0;min-height:142px}.play-wrap{order:2;height:auto;padding:18px}.evo-hud{order:3;min-height:0;margin-bottom:20px;padding:28px 22px 78px;background-size:100% 100%}.evolution{grid-template-columns:repeat(2,minmax(0,1fr))}
  #gameCanvas{width:min(100%,520px);height:auto;aspect-ratio:3/4}.demo-note{position:relative;left:auto;bottom:auto;transform:none;order:99;width:100%;padding:0 10px;margin-top:4px}
  .result-screen{padding:64px 14px 78px}.result-panel{margin-bottom:14px;background-size:100% 150px,auto;padding:44px 36px 34px}.result-list{grid-template-columns:1fr;min-height:520px;margin-bottom:24px}
}
@media (max-width:520px){
  .back-link{top:8px;left:8px;font-size:12px;min-height:34px}.title-screen{padding:78px 14px 26px}.title-panel{padding:52px 28px 34px;min-height:280px}.eyebrow{font-size:8px;margin-left:14px;letter-spacing:.04em;white-space:nowrap}h1{font-size:clamp(31px,8.8vw,35px);line-height:1.08}.lead{font-size:14px;line-height:1.55;margin-left:6px}.asset-button{min-height:54px;min-width:190px;padding:0 18px}.evo-rail{height:104px;padding:10px 14px;overflow:hidden}.evo-rail canvas{max-width:76px!important}.evo-rail .mini-crab:not(:last-child)::after{right:-15px;width:22px}
  .left-hud{grid-template-columns:1fr 1fr}.left-hud .secondary{grid-column:1 / -1;min-height:58px}.score-box,.next-box{min-height:122px}.score-box strong{font-size:38px}.next-box{padding:9px}#nextCanvas{width:76px}#nextName{font-size:14px}.play-wrap{padding:11px}#gameCanvas{border-width:7px}.evo-hud{padding:38px 20px 52px}.evolution{grid-template-columns:1fr}.evolution li{grid-template-columns:28px 42px 1fr 32px;min-height:41px}
  .result-panel{padding:42px 24px 30px;background-size:100% 135px,auto}.result-panel h2{font-size:34px}.result-score{justify-content:flex-start;margin:18px 0 118px}.result-score strong{font-size:50px}#bestCanvas{float:none;display:block;margin:-112px auto 8px;width:170px;height:140px}.result-list{padding:16px 18px 72px;min-height:0}.result-list li{min-height:76px;grid-template-columns:34px 64px 1fr}.result-list img{width:62px;height:62px}
}