@font-face { font-family:"Berkshire Swash"; src:url("../winter-assets/winter-heading-font.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
:root { color-scheme: light; --ink:#183e35; --green:#1c624e; --ice:#e7f5f6; --red:#a52c47; --gold:#f0cb60; --text:#233631; --muted:#596b66; --line:#cbdcd7; --white:#fff; --japanese-font:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { font:16px/1.5 "Trebuchet MS",Arial,sans-serif; color:var(--text); background:var(--ice); }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #cc7b20; outline-offset:3px; }
button svg { width:20px; height:20px; flex-shrink:0; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:"Berkshire Swash",Georgia,serif; font-weight:400; }
h1 { font-size:28px; line-height:1.12; }
h2 { font-size:30px; line-height:1.2; margin:8px 0 18px; color:var(--ink); overflow-wrap:anywhere; }
.room-shell { height:100svh; min-height:510px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.room-header { background:#fff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:3px solid var(--green); }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand > svg { width:36px; height:36px; color:var(--red); flex-shrink:0; }
.brand p { font-size:12px; text-transform:uppercase; font-weight:bold; color:var(--muted); }
.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--ink); flex-shrink:0; }
.icon-button:hover { background:var(--ice); }
.notebook-button { display:flex; align-items:center; gap:10px; background:transparent; border:1px solid var(--line); border-radius:5px; color:var(--ink); padding:9px 12px; min-height:42px; font-weight:bold; }
#progress-count { font-size:13px; font-weight:normal; white-space:nowrap; }
.room-stage { position:relative; min-height:0; background:var(--ink); overflow:hidden; }
.language-control { position:absolute; z-index:2; top:14px; left:14px; margin:0; display:flex; align-items:center; gap:7px; background:#fff; color:var(--ink); padding:8px 12px; border-radius:4px; min-height:44px; cursor:pointer; font:14px/1.4 var(--japanese-font); }
.language-control input { accent-color:var(--green); width:18px; height:18px; }
.japanese { display:block; font:14px/1.7 var(--japanese-font); color:var(--muted); text-transform:none; font-weight:400; overflow-wrap:anywhere; margin-top:4px; }
body.japanese-off .japanese { display:none; }
.primary-button .japanese { color:#fff; font-size:12px; margin:0; }
.text-button .japanese { color:var(--green); font-size:12px; margin:0; }
h2 .japanese { font-size:17px; color:var(--ink); }
.reading .japanese { padding-top:8px; }
.mission .japanese { font-size:12px; line-height:1.5; }
.brand .japanese { font-size:12px; line-height:1.3; }
#panorama { width:100%; height:100%; }
.loading-message { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; background:var(--ink); color:#fff; z-index:3; }
.loading-message[hidden] { display:none; }
.loading-message.error { align-items:center; flex-direction:column; gap:12px; }
.room-tools { position:absolute; z-index:2; bottom:18px; right:18px; display:flex; flex-direction:column; gap:4px; background:rgba(255,255,255,.94); padding:4px; border-radius:6px; }
.room-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:17px 24px; background:#fff; border-top:3px solid var(--green); }
.mission p:first-child { font:700 19px/1.3 Georgia,serif; color:var(--ink); }
.mission p:last-child { font-size:13px; color:var(--muted); margin-top:3px; max-width:380px; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 17px; border:0; border-radius:5px; background:var(--red); color:#fff; font-weight:bold; min-height:44px; }
.primary-button:hover { background:#8e233b; }
.door-button { flex-shrink:0; }
.letter-strip { display:flex; gap:7px; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:center; }
.letter-strip li { display:flex; align-items:center; justify-content:center; width:35px; height:42px; border-bottom:2px solid var(--line); font:700 23px Georgia,serif; color:var(--green); background:var(--ice); }
.letter-strip li.empty { color:var(--muted); }
.snowflake-hotspot { width:48px; height:48px; margin-left:-24px; margin-top:-24px; background:transparent; border:0; border-radius:0; }
.snowflake-button { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:0 !important; outline:0; border-radius:0; background:transparent !important; padding:5px; }
.snowflake-button img { width:38px; height:38px; filter:brightness(0) invert(1) drop-shadow(0 1px 3px #153c44) drop-shadow(0 0 5px #153c44); transition:transform .18s; }
.snowflake-button:hover img,.snowflake-button:focus-visible img { transform:scale(1.17); filter:brightness(0) saturate(100%) invert(90%) sepia(68%) saturate(625%) hue-rotate(335deg) drop-shadow(0 1px 3px #153c44); }
.snowflake-button.solved img { opacity:.7; filter:brightness(0) saturate(100%) invert(90%) sepia(68%) saturate(625%) hue-rotate(335deg) drop-shadow(0 1px 3px #153c44); }
.snowflake-button:focus-visible { outline:0; }
.pnlm-about-msg { display:none !important; }
dialog { border:0; border-radius:8px; padding:26px; width:min(570px,calc(100% - 28px)); max-height:calc(100svh - 32px); overflow-y:auto; color:var(--text); box-shadow:0 15px 80px #091e2366; }
dialog::backdrop { background:#0e272e9e; }
.dialog-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:-9px; }
.eyebrow { font-size:12px; text-transform:uppercase; font-weight:bold; color:var(--green); }
.reading { margin-bottom:20px; line-height:1.65; }
label { display:block; font-weight:bold; margin:14px 0 7px; }
input:not([type=checkbox]):not([type=radio]),select,textarea { width:100%; border:1px solid #90a7a0; background:#fff; color:var(--text); border-radius:4px; padding:10px 12px; min-height:44px; }
input[aria-invalid=true],select[aria-invalid=true] { border:2px solid var(--red); }
fieldset { border:0; padding:0; margin:20px 0; min-width:0; }
legend { font-weight:bold; margin-bottom:9px; }
.choices { display:grid; gap:8px; }
.choice-label { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:5px; padding:9px 12px; margin:0; font-weight:normal; cursor:pointer; min-height:44px; }
.choice-label:has(input:checked) { border-color:var(--green); background:#e5f2e9; }
.choice-label input { accent-color:var(--green); width:18px; height:18px; flex-shrink:0; }
.field-error { font-size:14px; margin-top:6px; color:var(--red); }
.feedback { min-height:24px; margin:16px 0 12px; color:var(--red); }
.feedback.correct { color:var(--green); font-weight:bold; }
.puzzle-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:4px; padding:10px 8px; background:transparent; color:var(--green); min-height:44px; }
.text-button:hover { background:var(--ice); }
.hint { margin-top:18px; background:var(--ice); padding:12px; border-radius:4px; }
.sentence { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:76px; padding:12px; border-bottom:2px solid var(--green); background:var(--ice); }
.word-bank { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; min-height:46px; }
.word-button { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); padding:9px 13px; min-height:44px; }
.word-button:hover { background:#e5f2e9; }
.sentence .word-button { background:var(--green); color:#fff; border:0; }
.sentence:empty::before { content:"..."; color:var(--muted); }
#notebook-list { list-style:none; padding:0; margin:16px 0 0; }
#notebook-list li { border-top:1px solid var(--line); }
.notebook-entry { display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; padding:13px 0; color:var(--ink); background:transparent; min-height:64px; }
.notebook-entry:hover { background:var(--ice); }
.notebook-entry .entry-text { flex:1; min-width:0; }
.notebook-entry strong { display:block; overflow-wrap:anywhere; }
.notebook-entry small { display:block; color:var(--muted); font-size:13px; }
.entry-letter { display:flex; align-items:center; justify-content:center; width:37px; height:40px; flex-shrink:0; background:var(--ice); font:700 23px Georgia,serif; color:var(--green); }
.door-dialog .letter-strip { margin:22px 0; }
.success-dialog > .dialog-header > svg { width:36px; height:36px; color:var(--red); }
.success-dialog .primary-button { margin-top:24px; }
.no-script { position:fixed; inset:40% 10% auto; background:#fff; padding:20px; }
@media (max-width:780px) {
  .room-header { padding:11px 14px; gap:8px; }
  h1 { font-size:23px; }
  .brand > svg { width:28px; height:28px; }
  .brand { gap:7px; }
  .header-actions { gap:3px; }
  .notebook-button { gap:6px; padding:9px; }
  .notebook-button > span:first-of-type { display:none; }
  .room-footer { display:grid; grid-template-columns:1fr auto; padding:12px 14px; gap:10px; }
  .mission { grid-column:1/-1; }
  .mission p:first-child { font-size:17px; }
  .mission p:last-child { max-width:none; font-size:12px; }
  .letter-strip { justify-content:flex-start; gap:5px; }
  .letter-strip li { width:29px; height:35px; font-size:21px; }
  .door-button { padding:10px; font-size:14px; }
  .room-tools { bottom:10px; right:10px; }
  dialog { padding:20px; }
  h2 { font-size:27px; }
}
@media (max-width:380px) {
  .brand > svg { display:none; }
  h1 { font-size:20px; }
  .brand p { font-size:12px; }
  .icon-button { width:38px; height:40px; }
  .letter-strip { gap:4px; }
  .letter-strip li { width:23px; }
  .door-button { gap:5px; }
}
@media (max-height:530px) and (min-width:600px) {
  .room-shell { min-height:390px; }
  .room-header { padding:8px 18px; }
  .room-footer { padding:8px 18px; }
  .mission p:last-child { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }

/* Editable values come from winter-config.js; structural layout stays here. */
:root { --heading-font:"Berkshire Swash",Georgia,serif; --body-font:"Trebuchet MS",Arial,sans-serif; --heading-size:28px; --body-size:16px; --dialog-width:620px; --corner-radius:6px; --snowflake-size:60px; --snowflake-tint:#c2eaff; }
body { font-family:var(--body-font);font-size:var(--body-size); }
h1,h2 { font-family:var(--heading-font); }
h1 { font-size:var(--heading-size); }
.room-header,.room-footer,dialog { background:var(--white); }
.brand p { font-size:12px; }
.room-shell { position:relative; }
.room-header { gap:12px; }
.brand { flex:1; }
.brand h1 { overflow-wrap:anywhere; }
.header-actions { flex-shrink:0; }
.room-footer { gap:18px; flex-wrap:wrap; }
.letter-strip { max-width:480px; }
.primary-button,.notebook-button,dialog { border-radius:var(--corner-radius); }
dialog { width:min(var(--dialog-width),calc(100% - 24px)); }
.snowflake-hotspot { width:var(--snowflake-size);height:var(--snowflake-size);margin-left:calc(var(--snowflake-size)/-2);margin-top:calc(var(--snowflake-size)/-2);border:0;background:none; }
.snowflake-button { width:100%;height:100%;padding:0;border:0;background:none;filter:drop-shadow(0 1px 2px #15363e) drop-shadow(0 0 2px #15363e); }
.snowflake-shape { display:block;width:100%;height:100%;background:var(--snowflake-tint);-webkit-mask:var(--snowflake-mask) center/contain no-repeat;mask:var(--snowflake-mask) center/contain no-repeat;transition:transform .18s; }
.snowflake-button:hover .snowflake-shape,.snowflake-button:focus-visible .snowflake-shape { transform:scale(1.15);background:#fff; }
.snowflake-button.solved .snowflake-shape { background:var(--gold); }
.winter-menu { position:absolute;right:16px;top:90px;width:min(320px,calc(100% - 32px));max-height:60svh;overflow:auto;z-index:10;background:var(--white);box-shadow:0 8px 32px #14373a44;border-radius:var(--corner-radius);padding:8px; }
.winter-menu-item { display:flex;gap:12px;align-items:center;text-align:left;padding:12px;width:100%;border:0;background:transparent;text-decoration:none;color:var(--ink); }
.winter-menu-item:hover { background:var(--ice); }
.winter-menu-item svg { width:20px;height:20px;flex-shrink:0; }
[hidden] { display:none !important; }
.jigsaw-dialog { --dialog-width:1040px; }
.jigsaw-dialog .reading { margin-bottom:12px; }
.jigsaw-toolbar { display:flex;align-items:center;gap:4px;flex-wrap:wrap; }
.jigsaw-toolbar input[type=range] { flex:1;min-width:80px;width:100px;max-width:160px; }
.jigsaw-toolbar select { width:auto;max-width:150px;font-size:14px; }
.jigsaw-viewport { width:100%;max-height:55svh;min-height:180px;overflow:auto;background:var(--ice);border:1px solid var(--line);margin-top:8px;touch-action:none; }
.jigsaw-viewport .konvajs-content { touch-action:none; }
.jigsaw-status { font-size:14px;margin:8px 0; }
.jigsaw-reference { display:block;max-width:100%;max-height:240px;object-fit:contain;margin:auto; }
@media(max-width:780px) {
  h1 { font-size:23px; }
  .room-header { padding:10px; }
  .brand > svg { display:none; }
  .header-actions { gap:0; }
  .notebook-button { border:0;padding:7px; }
  #notebook-button > span:first-of-type { display:none; }
  .room-footer { display:flex;gap:8px; }
  .mission { flex-basis:100%; }
  .room-footer > .letter-strip { flex:1; }
  .letter-strip li { width:25px;height:34px;font-size:19px; }
  .winter-menu { top:95px; }
  .jigsaw-dialog { padding:14px; }
  .jigsaw-toolbar .icon-button { width:40px;height:44px; }
}
@media(max-width:380px) { h1 {font-size:20px;} .icon-button {width:36px;height:44px;} .room-footer .letter-strip {flex-basis:100%;} .door-button {margin-left:auto;} }
@media(max-height:530px) and (min-width:600px) { .room-header {padding:6px 14px;} .winter-menu {top:75px;} .room-footer {padding:6px 14px;} }