:root { --ink:#2B2833; --wall:#3B3A4A; --kraft:#C8A27A; --dark:#9C7650; --tape:#E9D8A6; --floor-a:#E8C89A; --floor-b:#D9B27F; --tile:#EFE6D8; --paper:#FFF8EC; --cream:#FFF4E0; --yellow:#F2B63D; --blue:#4FA3E0; --coral:#EF6F5E; --mint:#5CC9A7; --red:#E2483D; --teal:#2F8F8A; font-family:"Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif; color:var(--ink); background:var(--tile); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:360px; }
button,select,textarea { font:inherit; color:var(--ink); }
button,summary,select { cursor:pointer; }
button { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; }
.app { max-width:1320px; margin:0 auto; padding:0 38px; }
.masthead { height:96px; display:flex; align-items:center; gap:22px; border-bottom:2px solid var(--kraft); margin-bottom:30px; }
.brand { border:0; background:none; display:flex; gap:12px; align-items:center; text-align:left; font-size:22px; font-weight:900; padding:0; }
.brand small { display:block; font-size:9px; letter-spacing:2px; margin-top:1px; }
.brand-mark { border:3px solid var(--ink); border-radius:50%; width:47px; height:47px; display:grid; place-items:center; background:var(--tape); font-size:24px; transform:rotate(-8deg); }
.draft-tag { margin-left:auto; font-size:14px; color:var(--wall); }
.paper { position:relative; background:var(--paper); border:3px solid var(--ink); border-radius:16px; }
.paper::before,.paper::after { content:""; position:absolute; z-index:2; width:45px; height:14px; background:var(--tape); border:1px solid var(--kraft); pointer-events:none; }
.paper::before { top:-7px; left:16px; transform:rotate(-10deg); }
.paper::after { top:-7px; right:15px; transform:rotate(13deg); }
.sticker { border:2px solid var(--ink); border-radius:10px; padding:12px 17px; background:var(--paper); box-shadow:0 3px 0 var(--ink); font-size:16px; font-weight:800; transition:transform .1s; }
.sticker:hover { background:var(--tape); }
.sticker:active { transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.sticker.primary { background:var(--tape); }
.hero .sticker.primary { background:var(--yellow); }
.sticker:disabled { color:var(--dark); border-color:var(--kraft); box-shadow:0 3px 0 var(--kraft); cursor:default; }
.sticker.small { padding:8px 12px; font-size:14px; }
.sticker.full { width:100%; margin-top:10px; }
kbd { display:inline-block; font:700 11px/1.5 system-ui,sans-serif; border:1px solid var(--dark); border-radius:4px; padding:1px 4px; background:var(--cream); white-space:nowrap; vertical-align:2px; margin-left:6px; }
button:focus-visible,summary:focus-visible,select:focus-visible,canvas:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
.hero { min-height:480px; display:grid; grid-template-columns:45% 55%; overflow:visible; }
.hero-copy { padding:43px 0 40px 43px; z-index:1; }
.eyebrow { display:block; font-size:13px; font-weight:900; letter-spacing:2px; }
.hero h1 { font-size:85px; line-height:1.06; letter-spacing:6px; margin:15px 0 20px; font-weight:950; transform:rotate(-2deg); }
.hero h1>span:first-child { background:var(--tape); padding:0 9px; border-radius:10px; }
.title-star { color:var(--teal); font-size:50px; margin-left:12px; vertical-align:10px; }
.hook { font-size:21px; line-height:1.8; font-weight:800; margin:16px 0 10px; }
.quiet { color:var(--wall); font-size:14px; line-height:1.8; }
.hero-actions { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.hero-art { display:flex; align-items:center; position:relative; overflow:hidden; border-radius:0 14px 14px 0; }
.hero-art canvas { width:133%; max-width:none; transform:translate(-3%,4%) rotate(3deg); }
.art-note { position:absolute; right:30px; bottom:30px; padding:15px 21px; line-height:1.8; font-size:16px; font-weight:900; background:var(--tape); border:2px solid var(--ink); transform:rotate(-5deg); border-radius:9px; }
.chapter-heading { display:flex; align-items:center; justify-content:space-between; margin:31px 0 18px; gap:20px; }
h2 { font-size:21px; margin:0; }
.chapter-heading>span { font-size:13px; }
.level-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:21px; }
.level-card { text-align:left; border:2px solid var(--ink); background:var(--paper); border-radius:12px; padding:23px 24px; position:relative; }
.level-card:hover { transform:translateY(-3px); background:var(--cream); }
.level-card .number { display:inline-grid; place-items:center; width:35px; height:35px; border:2px solid var(--ink); background:var(--tape); border-radius:8px; transform:rotate(-5deg); font-size:19px; font-weight:900; }
.level-card h3 { font-size:21px; margin:12px 0 7px; }
.level-card p { font-size:14px; margin:0 0 17px; }
.level-card .par { display:flex; justify-content:space-between; font-size:12px; font-weight:800; }
.draft-foot { font-size:12px; color:var(--wall); margin:23px 0 25px; text-align:center; line-height:1.8; }
.game-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.game-heading h1 { font-size:30px; margin:6px 0 0; }
.level-select { display:flex; align-items:center; gap:12px; font-size:13px; }
select { border:2px solid var(--ink); border-radius:8px; background:var(--paper); padding:9px 12px; font-size:14px; font-weight:700; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 277px; gap:22px; align-items:start; }
.board-paper { overflow:visible; padding:8px 0 0; }
#board { display:block; width:100%; border-radius:14px; }
.sidebar { display:grid; gap:17px; }
.round-panel { padding:18px; text-align:center; }
.status-header { display:flex; align-items:center; justify-content:space-between; gap:7px; font-size:12px; }
.pill { background:var(--tape); border:1px solid var(--ink); border-radius:6px; padding:5px 9px; font-weight:900; }
.clock-wrap { position:relative; width:154px; height:154px; margin:9px auto 0; }
#clock { width:154px; height:154px; }
.clock-number { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.clock-number strong { font-family:system-ui,sans-serif; font-size:31px; line-height:1.3; letter-spacing:-1px; }
.clock-number span { font-size:11px; }
.step-count { font-size:13px; font-weight:800; letter-spacing:2px; }
#round-caption { font-size:13px; min-height:38px; line-height:1.7; margin:11px 0 0; }
.round-panel h3 { font-size:21px; margin:17px 0 3px; }
#decision-text,#score-text { font-size:13px; line-height:1.7; margin:7px 0; }
.stars { font-size:30px; color:var(--dark); letter-spacing:5px; margin-top:15px; }
.explain { padding:21px 18px 18px; min-height:136px; }
.note-label { font-size:11px; letter-spacing:2px; font-weight:800; }
.explain h3 { font-size:17px; line-height:1.5; margin:9px 0 7px; }
.explain p { font-size:13px; line-height:1.8; margin:0; }
.explain.conflict { border-color:var(--red); }
.explain.conflict h3 { color:var(--red); }
.deviation { font-size:12px; line-height:1.6; border-top:1px dashed var(--kraft); padding-top:10px; margin-top:12px; }
.hint { padding:14px 17px; font-size:13px; }
.hint summary { font-weight:800; }
.hint p { font-size:13px; line-height:1.8; }
.timeline-panel { padding:21px 20px 17px; margin-top:24px; }
.timeline-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:15px; }
.timeline-heading h2 { font-size:17px; }
.timeline-heading small { font-size:11px; color:var(--wall); font-weight:500; margin-left:8px; }
.timeline-heading>span { font-size:11px; color:var(--wall); }
.timeline-row { display:grid; grid-template-columns:99px 1fr; align-items:center; margin:8px 0; gap:10px; }
.track-name { border:2px solid var(--ink); border-radius:7px; padding:7px 3px; font-size:12px; font-weight:900; white-space:nowrap; background:var(--cream); }
.track-name.selected { border-style:dashed; }
.track-name.clone-0 { background:var(--yellow); }
.track-name.clone-1 { background:var(--blue); }
.track-name.clone-2 { background:var(--coral); }
.track { display:grid; grid-template-columns:repeat(40,minmax(0,1fr)); gap:2px; }
.tick { padding:0; border:1px solid var(--kraft); border-radius:3px; height:31px; background:var(--cream); font:700 14px system-ui,sans-serif; font-variant-emoji:text; color:var(--ink); position:relative; overflow:hidden; }
.tick.recorded { background:var(--tape); border-color:var(--dark); }
.clone-0 .tick.recorded { background:var(--yellow); }
.clone-1 .tick.recorded { background:var(--blue); }
.clone-2 .tick.recorded { background:var(--coral); }
.tick.future { opacity:.55; }
.tick.failed { background:var(--red)!important; color:var(--paper); border-color:var(--red); }
.tick.failed::after { content:"!"; position:absolute; top:0; right:1px; font-size:9px; }
.tick.cursor { border:2px solid var(--ink); transform:translateY(-3px); }
.tick:disabled { cursor:default; }
.timeline-legend { display:flex; gap:19px; font-size:11px; margin:14px 0; flex-wrap:wrap; }
.record-tools { display:flex; align-items:center; gap:10px; border-top:1px dashed var(--kraft); padding-top:13px; }
.record-tools>span { font-size:12px; margin-right:auto; }
.transport { display:flex; gap:11px; align-items:center; margin:21px 0 18px; flex-wrap:wrap; }
.transport .active { background:var(--tape); }
#pending-label { font-size:13px; margin-left:auto; }
.controls { display:flex; gap:24px; flex-wrap:wrap; font-size:12px; }
.controls kbd { margin:0 4px 0 0; }
dialog { width:min(620px,calc(100vw - 30px)); padding:33px; color:var(--ink); background:var(--paper); }
dialog::backdrop { background:var(--ink); opacity:.6; }
dialog h2 { font-size:28px; margin:12px 0; }
dialog p { font-size:14px; line-height:1.8; }
.close-dialog { position:absolute; right:13px; top:15px; }
dialog label { font-size:11px; font-weight:800; }
textarea { width:100%; border:2px solid var(--ink); border-radius:9px; background:var(--cream); padding:12px; margin:8px 0; font:13px/1.8 monospace; resize:vertical; }
textarea:focus { outline:3px solid var(--teal); outline-offset:2px; }
.dialog-actions { display:flex; gap:14px; }
#code-message { min-height:23px; }
@media(min-width:1500px) { .app { max-width:1430px; } }
@media(max-width:1050px) { .app { padding:0 22px; } .game-layout { grid-template-columns:minmax(0,1fr) 245px; gap:16px; } .hero h1 { font-size:70px; } .hero-copy { padding-left:28px; } .hero { grid-template-columns:48% 52%; } .hero-art canvas { width:165%; } .draft-tag span { display:none; } .timeline-heading>span { display:none; } }
@media(max-width:780px) { .app { padding:0 15px; } .masthead { height:80px; gap:10px; margin-bottom:22px; } .draft-tag { display:none; } .masthead>.sticker { margin-left:auto; } .brand { font-size:18px; } .hero { display:block; overflow:hidden; } .hero-copy { padding:30px; } .hero h1 { font-size:75px; } .hero-art { height:220px; border-radius:0 0 14px 14px; } .hero-art canvas { width:100%; transform:translateY(-10%); } .art-note { bottom:14px; font-size:12px; } .chapter-heading { align-items:start; } .chapter-heading span { max-width:140px; line-height:1.7; } .level-cards { grid-template-columns:1fr; gap:12px; } .level-card { padding:19px; } .level-card h3 { display:inline; margin-left:13px; } .level-card p { margin:12px 0; } .game-layout { grid-template-columns:1fr; } .sidebar { grid-template-columns:1fr 1fr; align-items:start; } .sidebar .hint { grid-column:2; } .round-panel { grid-row:span 2; } .clock-wrap { margin-top:7px; } .game-heading h1 { font-size:24px; } .level-select { display:block; } .level-select label { display:none; } .timeline-panel { padding:17px 10px; overflow:auto; } #timelines { min-width:740px; } .timeline-heading small { display:none; } .record-tools { min-width:600px; } .transport { gap:8px; } #pending-label { margin:5px 0; width:100%; } .controls { gap:10px; } }
@font-face{font-family:Zcool;src:url('assets/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Baloo;src:url('assets/fonts/Baloo2-VariableFont_wght.ttf') format('truetype');font-weight:400 800;font-display:swap}
:root{font-family:Baloo,Zcool,system-ui,sans-serif;background:#EFE6D8;font-size:18px}
.app{max-width:1660px;padding:0 36px}.masthead{height:86px;margin-bottom:24px}.brand{font-family:Zcool;font-size:26px}.brand small{font-family:Baloo;font-size:11px}.draft-tag{font-size:16px}
button img{width:26px;height:26px;vertical-align:middle;margin-right:6px}.sticker{font-size:18px;background-image:url('assets/ui/button_secondary_normal.png');background-size:100% 100%;border:0;box-shadow:none;padding:14px 23px}.sticker.primary{background-image:url('assets/ui/button_primary_normal.png');background-color:transparent}.sticker.small{font-size:16px;padding:10px 16px}.sticker:hover{filter:brightness(1.03)}.sticker:active{transform:translateY(2px)}
.hero{min-height:630px;grid-template-columns:42% 58%}.hero-copy{padding:64px 0 50px 56px}.hero h1{font-family:Zcool;font-size:110px;line-height:1.16;margin-top:25px}.hero .hook{font-size:28px}.hero .quiet{font-size:18px}.hero-art canvas{width:150%;transform:translate(-10%,0) rotate(2deg)}.hero-actions{max-width:460px}.art-note{font-size:21px}.eyebrow{font-size:16px}.draft-foot{font-size:15px}.quiet{font-size:18px}
.chapter-heading{margin:32px 0}.chapter-heading h1{font-size:42px;margin:10px 0}.chapter-heading label{font-size:18px}.level-cards{grid-template-columns:repeat(4,1fr);gap:25px}.level-card{min-height:243px;background-image:url('assets/ui/level_card_available.png');background-size:100% 100%;border:0;padding:27px}.level-card:disabled{background-image:url('assets/ui/level_card_locked.png');color:#3B3A4A;cursor:default}.level-card h3{font-family:Zcool;font-size:25px;margin:15px 0 12px}.level-card p{font-size:18px;line-height:1.55}.level-card .par{font-size:16px;display:flex;gap:8px}.level-card>img{width:118px;height:auto;display:block;margin:8px 0}.level-card .number{font-family:Baloo;font-size:22px}
.game-heading{margin-bottom:18px}.game-heading h1{font-family:Zcool;font-size:34px}.level-select label,select{font-size:18px}.game-layout{grid-template-columns:minmax(0,1fr) 305px;gap:22px}.board-paper{padding:0;overflow:hidden}.sidebar{gap:14px}.round-panel{padding:16px}.round-panel p,#decision-text,#score-text,#round-caption{font-size:18px;line-height:1.45}.clock-wrap,#clock{width:130px;height:130px}.clock-number strong{font-family:Baloo;font-size:32px}.clock-number span,.step-count{font-size:16px}.status-header{font-size:16px}.round-panel h3{font-size:23px}.round-panel .sticker.full{font-size:16px;padding:11px 15px;margin-top:7px}.explain{padding:15px}.explain h3{font-size:21px}.explain p,.hint p{font-size:18px;line-height:1.55}.hint{font-size:18px}.deviation{font-size:16px}.note-label{font-size:14px}.tutorial{display:flex;gap:14px;align-items:center;background:#E9D8A6;padding:14px 20px;border-bottom:3px solid #2B2833;font-size:20px;line-height:1.5}.tutorial>img{width:32px}.tutorial>span{flex:1}.tutorial button{white-space:nowrap}
.timeline-panel{margin-top:18px;padding:18px 20px 12px}.timeline-heading{margin-bottom:8px}.timeline-heading h2{font-size:22px}.timeline-heading small,.timeline-heading>span{font-size:16px}.timeline-row{grid-template-columns:118px 1fr;margin:6px 0;gap:10px}.track-name{font-size:18px}.tick{height:31px;border:0;background:none!important}.tick img{width:100%;height:100%;object-fit:fill;margin:0}.timeline-legend{font-size:16px;margin:9px 0}.record-tools{padding-top:8px}.record-tools>span{font-size:16px}.transport{margin:14px 0;gap:9px}#pending-label{font-size:16px}.touch-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:13px 0}.touch-controls>span{font-size:18px;margin-right:auto}.touch-controls .sticker{padding:9px 16px;font-size:16px}.controls{font-size:16px;gap:18px}.game-screen .draft-foot{margin:12px 0}dialog label{display:block;margin:16px 0;font-size:18px}dialog input[type=range]{width:65%;vertical-align:middle;margin-left:12px}dialog p{font-size:18px}#storage-message{text-align:center;font-size:16px;padding:0 20px}.stars{font-family:Baloo}
@media(max-width:1200px){.level-cards{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:83px}.hero{min-height:540px}.hero-copy{padding-left:36px}.hero .hook{font-size:24px}.game-layout{grid-template-columns:minmax(0,1fr) 275px}.tutorial{font-size:18px}.app{padding:0 22px}}
@media(max-width:780px){.level-cards{grid-template-columns:1fr}.hero{display:block}.hero-copy{padding:32px}.hero-art{height:250px}.hero-art canvas{width:110%;transform:none}.game-layout{grid-template-columns:1fr}.tutorial{flex-wrap:wrap}.sidebar{grid-template-columns:1fr 1fr}.timeline-heading h2{font-size:18px}.chapter-heading{display:block}.touch-controls>span{width:100%}.app{padding:0 14px}}
@media(min-width:1201px){#board{width:min(100%,860px);margin:0 auto}.game-layout{align-items:start}.round-panel{display:grid;grid-template-columns:100px 1fr;gap:7px;padding:14px}.status-header{grid-column:1 / -1}.clock-wrap{grid-column:1;grid-row:2 / span 2;width:100px;height:100px;margin:0}#clock{width:100px;height:100px}.clock-number strong{font-size:27px}.clock-number span{font-size:13px}.step-count{grid-column:2;grid-row:2;align-self:end;font-size:15px;letter-spacing:0}#round-caption{grid-column:2;grid-row:3;font-size:16px;min-height:0;margin:0}.round-panel #decision,.round-panel #victory,.round-panel>button{grid-column:1 / -1}.round-panel h3{margin-top:7px}.round-panel .stars{margin-top:0}.round-panel .full{margin-top:5px}.sidebar .hint{font-size:16px}.timeline-row{margin:4px 0}.track-name{padding:5px 3px}.tick{height:29px}.timeline-panel{padding-top:14px}.tutorial{font-size:18px}}