/* ----- custom fonts (local) ----- */

 @font-face {
   font-family: 'Cinzel';
   src: url('assets/fonts/cinzel-bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Cinzel';
   src: url('assets/fonts/cinzel-medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Inter';
   src: url('assets/fonts/inter-regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Inter';
   src: url('assets/fonts/inter-bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }

 /* ----- theme variables (premium handcrafted palette) ----- */

 :root {
   --paper-0: #f4ede4;
   --paper-1: #ece0ce;
   --surface: #ffffff;
   --surface-soft: #faf6ed;
   --board: #fffbf3;
   --gold: #a86f1f;
   --gold-bright: #b87a2a;
   --ink: #2a1f13;
   --ink-dim: rgba(42, 31, 19, 0.55);
   --lantern: #d97d2a;
   --ember: #b9421f;
   --jade: #2a6b4a;
   --line: rgba(168, 111, 31, 0.25);
   --font-display: 'Cinzel', serif;
   --font-body: 'Inter', system-ui, sans-serif;
   --safe-t: env(safe-area-inset-top, 0px);
   --safe-b: env(safe-area-inset-bottom, 0px);
   --safe-l: env(safe-area-inset-left, 0px);
   --safe-r: env(safe-area-inset-right, 0px);
 }

 /* ----- reset & base ----- */

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 }

 html,
 body {
   height: 100%;
   width: 100%;
   overflow: hidden;
   overscroll-behavior: none;
 }

 body {
   background: radial-gradient(1200px 700px at 15% -10%, rgba(200, 70, 30, 0.08), transparent 60%), radial-gradient(900px 600px at 100% 110%, rgba(42, 107, 74, 0.06), transparent 55%), linear-gradient(150deg, var(--paper-0), var(--paper-1) 60%, var(--paper-0));
   height: 100vh;
   height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-body);
   padding: calc(var(--safe-t) + 6px) calc(var(--safe-r) + 8px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 8px);
   color: var(--ink);
   overflow: hidden;
 }

 /* ----- stage ----- */

 .stage {
   width: 100%;
   max-width: min(560px, 96vw);
   height: 100%;
   max-height: 100%;
   display: flex;
   flex-direction: column;
   gap: clamp(5px, 1.3vh, 10px);
   overflow: hidden;
   min-height: 0;
 }

 /* topbar */

 .topbar {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 2px 4px;
 }

 .brand {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(0.95rem, 3.4vh, 1.3rem);
   letter-spacing: 1px;
   color: var(--gold);
   display: flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .brand .lantern-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--lantern);
   box-shadow: 0 0 8px 2px rgba(217, 125, 42, 0.5);
   display: inline-block;
   flex: 0 0 auto;
 }

 .top-actions {
   display: flex;
   gap: 6px;
   flex: 0 0 auto;
 }

 .icon-btn {
   width: clamp(28px, 6vh, 36px);
   height: clamp(28px, 6vh, 36px);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(180deg, #ffffff, var(--surface-soft));
   border: 1px solid var(--line);
   color: var(--ink);
   font-size: clamp(0.8rem, 2.6vh, 1rem);
   cursor: pointer;
   box-shadow: 0 1px 3px rgba(120, 90, 40, 0.10);
   transition: transform .12s ease, background .12s ease;
 }

 .icon-btn:active {
   transform: scale(0.9);
   background: rgba(168, 111, 31, 0.14);
 }

 /* status strip */

 .status-strip {
   flex: 0 0 auto;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 6px;
 }

 .status-chip {
   background: linear-gradient(180deg, #ffffff, var(--surface-soft));
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: clamp(3px, 0.8vh, 6px) 4px;
   text-align: center;
   min-width: 0;
   box-shadow: 0 1px 3px rgba(120, 90, 40, 0.08);
 }

 .status-chip .label {
   font-size: clamp(0.5rem, 1.6vh, 0.6rem);
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--ink-dim);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .status-chip .value {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(0.8rem, 2.6vh, 1.05rem);
   color: var(--gold);
   white-space: nowrap;
 }

 .status-chip.timer.warn .value {
   color: var(--ember);
 }

 /* board */

 .board-wrap {
   flex: 1 1 auto;
   min-height: 0;
   min-width: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .board-frame {
   position: relative;
   border-radius: 22px;
   padding: 10px;
   background: radial-gradient(circle at 30% 20%, rgba(42, 107, 74, 0.06), transparent 55%), linear-gradient(150deg, var(--board), var(--paper-1));
   box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px rgba(120, 90, 40, 0.12), 0 2px 8px rgba(120, 90, 40, 0.08);
   width: 100%;
   height: 100%;
   min-height: 0;
   min-width: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .board-frame::before {
   content: '';
   position: absolute;
   inset: 6px;
   border-radius: 16px;
   border: 1px dashed rgba(168, 111, 31, 0.18);
   pointer-events: none;
 }

 #board {
   display: block;
   border-radius: 12px;
   touch-action: none;
   cursor: pointer;
 }

 /* action row */

 .action-row {
   flex: 0 0 auto;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
 }

 .action-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
   padding: clamp(5px, 1.2vh, 8px) 4px;
   border-radius: 12px;
   cursor: pointer;
   background: linear-gradient(180deg, #ffffff, var(--surface-soft));
   border: 1px solid var(--line);
   color: var(--ink);
   font-size: clamp(0.58rem, 1.8vh, 0.68rem);
   font-weight: 600;
   box-shadow: 0 1px 3px rgba(120, 90, 40, 0.08);
   transition: transform .12s ease, opacity .12s ease;
 }

 .action-btn .icon {
   font-size: clamp(0.9rem, 2.6vh, 1.15rem);
 }

 .action-btn .count {
   font-size: clamp(0.52rem, 1.5vh, 0.6rem);
   color: var(--gold);
 }

 .action-btn:active {
   transform: scale(0.93);
 }

 .action-btn:disabled,
 .action-btn.disabled {
   opacity: 0.35;
   pointer-events: none;
 }

 .action-btn.primary {
   background: linear-gradient(180deg, var(--gold-bright), var(--gold));
   color: #fff;
   border-color: transparent;
 }

 /* overlays */

 .overlay {
   position: absolute;
   inset: 0;
   border-radius: 22px;
   background: rgba(253, 249, 240, 0.94);
   backdrop-filter: blur(8px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(0.94) translateY(8px);
   pointer-events: none;
   transition: opacity .25s ease, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 30;
   padding: min(22px, 4vh) 16px;
   text-align: center;
 }

 .overlay.active {
   opacity: 1;
   transform: scale(1) translateY(0);
   pointer-events: auto;
 }

 .overlay h2 {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(1.1rem, 3.6vh, 1.5rem);
   color: var(--gold);
   letter-spacing: 1px;
   margin-bottom: 6px;
 }

 .overlay p {
   color: var(--ink-dim);
   margin: 2px 0;
   font-size: clamp(0.72rem, 2vh, 0.85rem);
 }

 .overlay .big-icon {
   font-size: clamp(1.8rem, 6vh, 2.6rem);
   margin-bottom: 6px;
   filter: drop-shadow(0 2px 8px rgba(217, 125, 42, 0.35));
 }

 .overlay .close-btn {
   position: absolute;
   top: 12px;
   right: 14px;
   font-size: 1.4rem;
   color: var(--ink-dim);
   cursor: pointer;
   padding: 6px;
 }

 .overlay-actions {
   display: flex;
   gap: 10px;
   margin-top: 16px;
   flex-wrap: wrap;
   justify-content: center;
 }

 .pill-btn {
   padding: clamp(7px, 1.6vh, 10px) clamp(14px, 3vw, 20px);
   border-radius: 40px;
   font-weight: 700;
   cursor: pointer;
   font-size: clamp(0.75rem, 2vh, 0.85rem);
   background: linear-gradient(180deg, var(--gold-bright), var(--gold));
   color: #fff;
   border: none;
   box-shadow: 0 2px 8px rgba(168, 111, 31, 0.3);
   transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
 }

 .pill-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(168, 111, 31, 0.4);
   filter: brightness(1.04);
 }

 .pill-btn.ghost {
   background: #ffffff;
   color: var(--ink);
   border: 1px solid var(--line);
 }

 .pill-btn:active {
   transform: scale(0.95);
 }

 /* level select */

 .level-scroll {
   width: 100%;
   height: 100%;
   max-height: 100%;
   overflow-y: auto;
   padding: 6px 2px 4px;
 }

 .tier-block {
   margin-bottom: 14px;
 }

 .tier-title {
   font-size: 0.68rem;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--ink-dim);
   text-align: left;
   margin: 0 2px 6px;
 }

 .level-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 7px;
 }

 .level-btn {
   aspect-ratio: 1/1;
   border-radius: 10px;
   border: 1px solid var(--line);
   background: linear-gradient(180deg, #ffffff, var(--surface-soft));
   color: var(--ink);
   font-weight: 700;
   font-size: 0.8rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: relative;
   box-shadow: 0 1px 3px rgba(120, 90, 40, 0.08);
 }

 .level-btn.current {
   outline: 2px solid var(--lantern);
 }

 .level-btn.locked {
   opacity: 0.32;
   pointer-events: none;
 }

 .level-btn .stars {
   position: absolute;
   bottom: 2px;
   font-size: 0.45rem;
   letter-spacing: 1px;
   color: var(--gold);
 }

 /* achievements */

 .achieve-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
   max-width: 340px;
   overflow-y: auto;
   max-height: 100%;
 }

 .achieve-item {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #ffffff;
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 9px 12px;
   text-align: left;
   font-size: 0.78rem;
   flex: 0 0 auto;
   box-shadow: 0 1px 3px rgba(120, 90, 40, 0.08);
 }

 .achieve-item.done {
   border-color: var(--gold);
   background: rgba(168, 111, 31, 0.08);
 }

 .achieve-item .a-icon {
   font-size: 1.3rem;
 }

 .achieve-item .a-text b {
   display: block;
   color: var(--ink);
 }

 .achieve-item .a-text span {
   color: var(--ink-dim);
   font-size: 0.7rem;
 }

 ::-webkit-scrollbar {
   width: 6px;
 }

 ::-webkit-scrollbar-thumb {
   background: rgba(168, 111, 31, 0.35);
   border-radius: 6px;
 }

 /* full‑screen menus */

 .menu-screen {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: radial-gradient(1200px 700px at 15% -10%, rgba(200, 70, 30, 0.06), transparent 60%), radial-gradient(900px 600px at 100% 110%, rgba(42, 107, 74, 0.05), transparent 55%), linear-gradient(150deg, var(--paper-0), var(--paper-1) 60%, var(--paper-0));
   display: flex;
   align-items: center;
   justify-content: center;
   padding: calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
   opacity: 0;
   pointer-events: none;
   transition: opacity .25s ease;
   overflow-y: auto;
 }

 .menu-screen.active {
   opacity: 1;
   pointer-events: auto;
 }

 #ovHowToPlay {
   z-index: 300;
   background: rgba(253, 249, 240, 0.97);
   backdrop-filter: blur(6px);
 }

 .menu-card {
   position: relative;
   width: 100%;
   max-width: 420px;
   max-height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: clamp(6px, 1.6vh, 10px);
   background: #ffffff;
   border: 1px solid var(--line);
   border-radius: 24px;
   padding: clamp(20px, 5vh, 36px) clamp(18px, 5vw, 28px);
   box-shadow: 0 14px 34px rgba(120, 90, 40, 0.16);
   text-align: center;
 }

 .menu-icon {
   font-size: clamp(2rem, 7vh, 3.2rem);
   filter: drop-shadow(0 2px 8px rgba(217, 125, 42, 0.35));
 }

 .menu-title {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(1.5rem, 6vh, 2.4rem);
   color: var(--gold);
   letter-spacing: 1px;
 }

 .menu-tag {
   color: var(--ink-dim);
   font-size: clamp(0.78rem, 2.1vh, 0.95rem);
   max-width: 320px;
   line-height: 1.45;
 }

 .menu-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 100%;
   margin-top: clamp(6px, 1.6vh, 12px);
 }

 .menu-actions .pill-btn {
   width: 100%;
   font-size: clamp(0.88rem, 2.3vh, 1rem);
   padding: clamp(11px, 2.2vh, 15px) 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
 }

 .menu-progress {
   font-size: clamp(0.68rem, 1.8vh, 0.78rem);
   color: var(--ink-dim);
   margin-top: 2px;
 }

 .howto-card {
   max-width: 480px;
 }

 .howto-scroll {
   width: 100%;
   max-height: min(48vh, 340px);
   overflow-y: auto;
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 2px 4px 2px 2px;
   margin: 2px 0 4px;
 }

 .howto-item {
   display: flex;
   gap: 10px;
   align-items: flex-start;
 }

 .howto-item .h-icon {
   font-size: 1.25rem;
   flex: 0 0 auto;
   line-height: 1.4;
 }

 .howto-item b {
   display: block;
   color: var(--ink);
   font-size: 0.85rem;
   margin-bottom: 1px;
 }

 .howto-item span {
   color: var(--ink-dim);
   font-size: 0.78rem;
   line-height: 1.42;
 }

 /* responsive adjustments */

 @media (max-height:640px) {
   .stage {
     gap: 4px;
   }
   .topbar {
     padding: 0 2px;
   }
   .status-chip {
     padding: 3px 3px;
     border-radius: 9px;
   }
   .action-btn {
     padding: 4px 3px;
     border-radius: 9px;
   }
   .overlay-actions {
     margin-top: 10px;
   }
   .menu-card {
     gap: 6px;
     padding: 16px 18px;
   }
   .menu-actions {
     margin-top: 6px;
     gap: 8px;
   }
   .howto-scroll {
     max-height: 38vh;
     gap: 8px;
   }
 }

 @media (max-height:440px) {
   .status-chip .label {
     display: none;
   }
   .brand {
     font-size: 0.85rem;
   }
   .action-btn .icon {
     font-size: 0.85rem;
   }
   .menu-icon {
     display: none;
   }
   .menu-title {
     font-size: 1.3rem;
   }
   .menu-tag {
     font-size: 0.72rem;
   }
 }

 @media (max-width:380px) {
   .brand {
     font-size: 1.05rem;
   }
   .status-chip .value {
     font-size: 0.9rem;
   }
   .action-btn {
     font-size: 0.6rem;
   }
   .top-actions {
     gap: 4px;
   }
   .icon-btn {
     width: clamp(26px, 5.4vh, 32px);
     height: clamp(26px, 5.4vh, 32px);
     font-size: clamp(0.72rem, 2.3vh, 0.9rem);
   }
 }

 @media (min-width:900px) and (min-height:760px) {
   .stage {
     max-width: 600px;
   }
 }

 /* LOADING SCREEN */

 #loadingScreen {
   position: fixed;
   inset: 0;
   z-index: 1000;
   background: radial-gradient(1200px 700px at 15% -10%, rgba(200, 70, 30, 0.08), transparent 60%), radial-gradient(900px 600px at 100% 110%, rgba(42, 107, 74, 0.06), transparent 55%), linear-gradient(150deg, var(--paper-0), var(--paper-1) 60%, var(--paper-0));
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   transition: opacity 0.8s ease;
 }

 #loadingScreen.hidden {
   opacity: 0;
   pointer-events: none;
 }

 .load-icon {
   font-size: clamp(3.5rem, 12vh, 5.5rem);
   animation: pulse-glow 1.2s ease-in-out infinite alternate;
   filter: drop-shadow(0 0 20px rgba(217, 125, 42, 0.4));
 }

 .load-title {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(1.8rem, 6vh, 2.8rem);
   color: var(--gold);
   letter-spacing: 2px;
 }

 .load-bar {
   width: clamp(180px, 40vw, 320px);
   height: 5px;
   background: rgba(168, 111, 31, 0.2);
   border-radius: 6px;
   overflow: hidden;
   margin-top: 8px;
 }

 .load-bar-fill {
   height: 100%;
   width: 0%;
   background: linear-gradient(90deg, var(--gold), var(--lantern), var(--gold));
   border-radius: 6px;
   animation: load-fill 1.8s ease-in-out forwards;
 }

 .load-sub {
   font-size: clamp(0.7rem, 1.6vh, 0.85rem);
   color: var(--ink-dim);
   letter-spacing: 1px;
 }

 @keyframes pulse-glow {
   0% {
     transform: scale(0.96);
     opacity: 0.7;
   }
   100% {
     transform: scale(1.04);
     opacity: 1;
   }
 }

 @keyframes load-fill {
   0% {
     width: 0%;
   }
   100% {
     width: 100%;
   }
 }