:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #102b27;
  color: #f7e8c4;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #2c6651, #102b27 65%); }
.app-shell { width: min(960px, 92vw); margin: 0 auto; padding: 24px 0 40px; }
.brand-bar { display: flex; justify-content: space-between; gap: 16px; color: #b9d5a7; }
.brand { margin: 0; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.status { margin: 0; opacity: .8; }
.hero { padding: 12vh 0 7vh; }
.eyebrow, .direction-note { color: #e7b96a; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
h1 { margin: 0; font-size: clamp(3rem, 10vw, 7rem); line-height: .9; }
.hero p:last-child { max-width: 480px; color: #d7dbc3; font-size: 1.1rem; }
.board-placeholder { display: grid; gap: 12px; padding: 28px; border: 3px solid #8a5730; border-radius: 42px; background: #6e4028; box-shadow: inset 0 0 0 8px #a96e3d, 0 24px 50px #06171388; }
.pit-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.pit-row span { aspect-ratio: 1; border-radius: 50%; background: #3a241b; box-shadow: inset 0 6px 8px #130c09, 0 2px 0 #d28a4c; }
.board-center { padding: 28px 0; text-align: center; color: #f0c47e; font-weight: 700; }
.direction-note { text-align: center; }
@media (max-width: 560px) { .app-shell { padding-top: 16px; } .hero { padding-top: 9vh; } .board-placeholder { padding: 16px; border-radius: 28px; } .pit-row { gap: 6px; } }

/* Playable board skin */
.app-shell { width: min(1080px, 92vw); }
.control-group[hidden], .is-hidden { display: none !important; }
.brand-mark img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: #f5e7c7; }
.creator-credit { position: fixed; right: 15px; bottom: 14px; z-index: 10; margin: 0; color: #8ca497; font-size: .68rem; }.creator-credit a { color: #e9b667; text-decoration: none; }.creator-credit a:hover { text-decoration: underline; }
.brand-bar, .game-info, .board-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand-mark { display: flex; align-items: center; gap: 9px; color: #e9b667; font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.brand-seal { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #e9b667; border-radius: 7px; font-family: Georgia, serif; font-size: 1.1rem; font-style: italic; }
.hero { padding: clamp(60px, 10vw, 112px) 0 42px; text-align: center; }.hero h1 { font-family: Georgia, serif; font-size: clamp(4rem, 12vw, 8.2rem); letter-spacing: -.08em; line-height: .82; }.hero-copy { max-width: 430px; margin: 25px auto 0; color: #b9c8ae; font-size: 1.05rem; line-height: 1.6; }
.control-panel { display: flex; align-items: end; gap: 18px; padding: 16px; border: 1px solid #ffffff1c; border-radius: 17px; background: #071a1899; }.control-group { display: grid; gap: 7px; }.control-label { color: #b9c8ae; font-size: .71rem; letter-spacing: .1em; text-transform: uppercase; }.segmented { display: flex; padding: 3px; border-radius: 10px; background: #18362f; }.choice, select { border: 1px solid transparent; border-radius: 7px; background: transparent; color: #f5e7c7; }.choice { padding: 9px 18px; }.choice.is-selected { background: #d69b4d; color: #281b13; font-weight: 800; }select { min-width: 125px; padding: 10px 12px; border-color: #ffffff20; background: #18362f; }.primary-button, .secondary-button { border: 0; border-radius: 9px; padding: 11px 17px; font-weight: 800; }.primary-button { margin-left: auto; background: #e9b667; color: #281b13; }.secondary-button { background: #21483e; color: #f5e7c7; }
.player-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-width: 165px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; color: #b9c8ae; font-size: .85rem; }.player-card.is-active { border-color: #e9b66766; background: #d69b4d18; color: #f5e7c7; }.player-card strong { color: #e9b667; font-size: 1.1rem; }.player-dot { width: 9px; height: 9px; border-radius: 50%; }.dot-one { background: #e9b667; }.dot-two { background: #85b4a0; }.turn-label { color: #e9b667; font-size: .84rem; font-weight: 800; text-align: center; }
.board-wrap { position: relative; padding: 15px; }.board { position: relative; display: grid; grid-template-columns: 120px 1fr 120px; grid-template-rows: 1fr 44px 1fr; align-items: center; gap: 13px; min-height: 365px; padding: 24px; border: 10px solid #87522f; border-radius: 48px; background: linear-gradient(145deg, #9c6338, #6b3d28); box-shadow: inset 0 0 0 3px #d2914f, inset 0 0 40px #3a2018, 0 18px 25px #0006; transition: transform .4s ease; }.board.rotated { transform: rotate(180deg); }.board.rotated .board-plaque, .board.rotated .store, .board.rotated .house { transform: rotate(180deg); }.houses { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(7px, 1.3vw, 15px); grid-column: 2; }#top-row { grid-row: 1; }#bottom-row { grid-row: 3; }.house { min-width: 40px; aspect-ratio: 1; border: 0; border-radius: 50%; background: radial-gradient(circle at 36% 25%, #76513d, #281713 72%); box-shadow: inset 0 8px 11px #080706, 0 4px 0 #d18a48; color: #f5e7c7; font-weight: 900; transition: transform .16s, filter .16s; }.house .seed-count { display: block; font-size: 1.1rem; line-height: 1; }.house small { display: block; margin-top: 3px; color: #d9aa6a; font-size: .48rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.house:hover:not(:disabled), .house.can-play { transform: translateY(-4px); filter: brightness(1.25); }.house:disabled { cursor: not-allowed; opacity: .78; }.store { display: grid; place-items: center; align-self: stretch; min-height: 128px; border-radius: 46% 46% 50% 50%; background: radial-gradient(ellipse at 38% 28%, #80533b, #281712 75%); box-shadow: inset 0 12px 17px #0b0806, 0 5px 0 #d18a48; color: #e9b667; font-size: 2rem; font-weight: 900; }.store-left { grid-column: 1; grid-row: 1 / 4; }.store-right { grid-column: 3; grid-row: 1 / 4; }.store small { display: block; color: #b9c8ae; font-size: .62rem; font-weight: 600; }.board-plaque { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 8px; color: #f5d18e; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }.direction-arrow { font-size: 1.5rem; }.board-actions { justify-content: center; flex-wrap: wrap; min-height: 38px; }.direction-note { margin: 0; font-size: .68rem; }.rules-card { max-width: 540px; margin: 40px auto 0; padding: 20px 24px; border-left: 2px solid #e9b667; background: #0c262280; }.rules-card h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.15rem; }.rules-card p { margin: 0; color: #b9c8ae; font-size: .9rem; line-height: 1.6; }footer { margin-top: 46px; color: #789185; font-size: .7rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; }footer span { color: #e9b667; }
.duel-active .board-wrap::before, .duel-active .board-wrap::after { position: absolute; top: 50%; z-index: 2; padding: 7px 9px; border: 1px solid #e9b66766; border-radius: 7px; background: #102d29ee; color: #e9b667; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }.duel-active .board-wrap::before { content: 'POV · PEMAIN 1'; left: -3px; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }.duel-active .board-wrap::after { content: 'POV · PEMAIN 2'; right: -3px; transform: rotate(90deg) translateX(50%); transform-origin: right top; }
@media (max-width: 680px) { .duel-active .board-wrap::before, .duel-active .board-wrap::after { display: none; }.control-panel { align-items: stretch; flex-wrap: wrap; }.primary-button { width: 100%; margin-left: 0; }.game-info { gap: 5px; }.player-card { min-width: 0; padding: 7px; }.player-card > span:not(.player-dot) { display: none; }.turn-label { font-size: .72rem; }.board { grid-template-columns: 57px 1fr 57px; min-height: 270px; padding: 12px 8px; border-width: 7px; border-radius: 30px; gap: 6px; }.store { min-height: 100px; font-size: 1.25rem; }.store small { font-size: .48rem; }.houses { gap: 5px; }.house { min-width: 25px; font-size: .72rem; box-shadow: inset 0 5px 7px #080706, 0 3px 0 #d18a48; }.house .seed-count { font-size: .75rem; }.house small { font-size: .4rem; }.board-plaque { font-size: .5rem; }.direction-arrow { font-size: 1.1rem; }}
@keyframes seed-settle { from { transform: scale(1.35); color: #fff4bb; } to { transform: scale(1); color: #f5e7c7; } }
.house.can-play { box-shadow: inset 0 8px 11px #080706, 0 0 0 2px #e9b66766, 0 0 18px #e9b66788, 0 4px 0 #d18a48; }
.house:hover:not(:disabled) { box-shadow: inset 0 8px 11px #080706, 0 0 0 3px #fff0b4, 0 0 26px #e9b667, 0 7px 15px #050b09aa; }
.house.is-highlight { z-index: 3; animation: path-glow .52s ease-in-out infinite alternate; }
.store.is-highlight { z-index: 3; animation: path-glow .52s ease-in-out infinite alternate; }
@keyframes path-glow { from { filter: brightness(1.05); box-shadow: inset 0 8px 11px #080706, 0 0 8px #fff0a0, 0 0 18px #e9b667; } to { filter: brightness(1.65); box-shadow: inset 0 8px 11px #080706, 0 0 18px #fff0a0, 0 0 36px #e9b667; } }
.duel-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }.duel-split .board { min-height: 330px; }.duel-split .perspective-two { transform: rotate(180deg); }.duel-split .perspective-two .board-plaque, .duel-split .perspective-two .store, .duel-split .perspective-two .house { transform: rotate(180deg); }.duel-split .perspective-two .house:hover:not(:disabled), .duel-split .perspective-two .house.can-play { transform: rotate(180deg) translateY(-4px); }
.duel-active .board-wrap::before, .duel-active .board-wrap::after { display: none; }.game-won .board { animation: victory-pulse .55s ease-in-out 3; }.speed-options .choice { padding-inline: 10px; }.speed-control { margin-left: auto; }.speed-control .control-label { text-align: center; }
@keyframes victory-pulse { 50% { filter: brightness(1.45) saturate(1.3); transform: scale(1.015); box-shadow: inset 0 0 0 3px #ffe08a, 0 0 35px #e9b667, 0 18px 25px #0006; } }
@media (min-width: 681px) { #rotate-board { display: none; } }
@media (max-width: 680px) { .duel-split { display: block; }.duel-split .duel-board-two { display: none; }.speed-control { width: 100%; margin-left: 0; }.speed-control .control-label { text-align: left; }.speed-options { justify-content: space-between; }.speed-options .choice { flex: 1; padding-inline: 5px; } }
.duel-split { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 0; padding: 18px; border: 1px solid #e9b66733; border-radius: 28px; background: linear-gradient(180deg, #102d29, #0b211f); }.duel-split > .board { width: 100%; }.duel-split > .board:first-child { background: linear-gradient(145deg, #9c6338, #6b3d28); }.duel-split > .duel-board-two { margin-top: 20px; border-top: 5px solid #85b4a0; background: linear-gradient(145deg, #3f6d5c, #23483e); }.duel-split > .board::before { position: absolute; top: 7px; left: 50%; z-index: 4; padding: 4px 8px; border-radius: 5px; background: #102d29cc; color: #e9b667; content: 'POV PEMAIN 1'; font-size: .58rem; letter-spacing: .12em; transform: translateX(-50%); }.duel-split > .duel-board-two::before { color: #b8e2ca; content: 'POV PEMAIN 2'; transform: rotate(180deg) translateX(50%); }.duel-split > .duel-board-two .board-plaque, .duel-split > .duel-board-two .store, .duel-split > .duel-board-two .house { transform: rotate(180deg); }.duel-split > .duel-board-two .house:hover:not(:disabled), .duel-split > .duel-board-two .house.can-play { transform: rotate(180deg) translateY(-4px); }
.rules-card { display: none; }.game-modal { width: min(560px, 88vw); padding: 30px; border: 1px solid #e9b66788; border-radius: 18px; background: #102d29; color: #f5e7c7; box-shadow: 0 20px 70px #000b; }.game-modal::backdrop { background: #061713bb; backdrop-filter: blur(5px); }.game-modal h2 { margin: 0 0 16px; font-family: Georgia, serif; font-size: 2rem; }.game-modal ol { margin: 0; padding-left: 22px; color: #d5dfca; line-height: 1.7; }.modal-note, .result-modal #result-summary, .advice { color: #b9c8ae; line-height: 1.6; }.modal-close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; color: #e9b667; font-size: 1.8rem; }.result-modal { text-align: center; }.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }.result-player { display: grid; gap: 5px; padding: 14px; border: 1px solid #ffffff1c; border-radius: 10px; background: #0b211f; color: #b9c8ae; font-size: .82rem; }.result-player strong { color: #e9b667; font-size: 1rem; }.result-player span:last-child { color: #f5e7c7; font-weight: 800; }.result-modal .primary-button { margin-top: 8px; }
.duel-split > .board.is-turn { outline: 2px solid #e9b667aa; outline-offset: 7px; box-shadow: inset 0 0 0 3px #f0c875, inset 0 0 42px #3a2018, 0 0 32px #e9b66766, 0 18px 25px #0006; }.duel-split > .duel-board-two.is-turn { outline-color: #85b4a0cc; box-shadow: inset 0 0 0 3px #b8e2ca, inset 0 0 42px #102d29, 0 0 32px #85b4a088, 0 18px 25px #0006; }.duel-split > .board.is-dim { opacity: .78; filter: saturate(.78) brightness(.88); box-shadow: inset 0 0 0 3px #53665b, inset 0 0 35px #0a1714, 0 10px 20px #0008; }.duel-split > .board.is-dim .house, .duel-split > .board.is-dim .store { animation: none; }.duel-split > .board.is-dim .house.is-highlight, .duel-split > .board.is-dim .store.is-highlight { animation: inactive-path-glow .6s ease-in-out infinite alternate; filter: none; }.duel-split > .board.is-dim .house.is-highlight { box-shadow: inset 0 8px 11px #080706, 0 0 7px #fff, 0 0 18px #dce8e3, 0 4px 0 #53665b; }.duel-split > .board.is-dim .store.is-highlight { box-shadow: inset 0 8px 11px #080706, 0 0 12px #fff, 0 0 28px #dce8e3, 0 5px 0 #aebdb5; }.duel-split > .board.is-turn .store.is-highlight { animation: store-white-glow .55s ease-in-out infinite alternate; box-shadow: inset 0 10px 15px #0b0806, 0 0 14px #fff, 0 0 30px #e9f1ed, 0 5px 0 #fff; }
.trivia-card { position: relative; max-width: 590px; margin: 28px auto 0; padding: 18px 22px 18px 26px; border: 1px solid #e9b66755; border-radius: 12px; background: linear-gradient(135deg, #193f35cc, #0d2824cc); box-shadow: 8px 8px 0 #0b201caa; }.trivia-card::before { position: absolute; top: 12px; left: 9px; width: 4px; height: calc(100% - 24px); border-radius: 3px; background: #e9b667; content: ''; }.trivia-card strong, .trivia-card p { display: block; }.trivia-kicker { color: #e9b667; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }.trivia-card strong { margin-top: 5px; font-family: Georgia, serif; font-size: 1.15rem; }.trivia-card p { margin: 7px 0 0; color: #b9c8ae; font-size: .86rem; line-height: 1.55; }.language-picker { position: fixed; bottom: 14px; left: 14px; z-index: 10; display: grid; gap: 3px; padding: 8px 10px; border: 1px solid #ffffff22; border-radius: 9px; background: #0b211fee; box-shadow: 0 6px 20px #0005; }.language-picker span { color: #b9c8ae; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }.language-picker select { min-width: 105px; padding: 4px 7px; border: 0; font-size: .75rem; }
.hero { position: relative; overflow: visible; }.hero::before, .hero::after { position: absolute; z-index: -1; color: #e9b66744; content: '✦'; font-size: 5rem; transform: rotate(18deg); }.hero::before { top: 18%; left: 7%; }.hero::after { right: 7%; bottom: 4%; color: #85b4a044; font-size: 4rem; transform: rotate(-18deg); }.board-wrap::after { position: absolute; right: 3%; bottom: -5px; width: 80px; height: 26px; border: 2px solid #e9b66755; border-radius: 50%; content: ''; opacity: .7; transform: rotate(-8deg); }
.end-early { border: 1px solid #e9b66799; color: #f5e7c7; background: #8b5732; box-shadow: 0 0 16px #e9b66755; }
.sepuh-mode { background: radial-gradient(circle at 50% -10%, #8d5a32, #3a2119 48%, #170d0b 100%); }.sepuh-mode .hero h1 { color: #f0c078; text-shadow: 0 0 22px #bc713e99; }.sepuh-mode .hero-copy, .sepuh-mode .status { color: #d8b38c; }.sepuh-mode .control-panel, .sepuh-mode .rules-card { background: #291612cc; border-color: #c2814c55; }.sepuh-mode .board { border-color: #6b3624; background: linear-gradient(145deg, #a26036, #4c241b); box-shadow: inset 0 0 0 3px #d28a4c, inset 0 0 45px #25100c, 0 18px 30px #090504; }.sepuh-mode .board-plaque { color: #f3c98b; }.sepuh-mode .trivia-card { background: linear-gradient(135deg, #4a271bcc, #24130fcc); border-color: #ce885355; }.sepuh-mode .brand-mark { color: #f0c078; }
.brand-mark img { width: 58px; height: 58px; padding: 0; border: 0; background: transparent; }.brand-mark > span { display: none; }.brand-mark a { display: inline-flex; }.hero { padding: 42px 0 28px; }.hero .eyebrow, .hero .hero-copy, .direction-note, .rules-card, footer { display: none; }.creator-credit { position: static; width: min(1080px, 92vw); margin: 28px auto 24px; padding: 10px 12px; border-top: 1px solid #e9b66755; color: #d9e1d2; font-size: .76rem; text-align: center; }.creator-credit a { font-weight: 800; }
.brand-bar .status { display: none; }.language-picker { position: fixed; right: auto; bottom: 14px; left: 14px; z-index: 20; width: max-content; margin: 0; transform: none; }.creator-credit { display: block; margin-bottom: 72px; }
.result-modal .advice { display: none; }
.rotate-screen { display: none; }.creator-credit { bottom: 14px; }
@media (max-width: 680px) and (orientation: portrait) { body { min-width: 320px; }.hero, .trivia-card, .rules-card, footer { display: none; }.app-shell { width: 100%; padding: 10px 10px 30px; }.brand-bar { padding: 0 4px 8px; }.control-panel { gap: 8px; padding: 10px; }.control-panel .control-group:first-child, .control-panel .control-group:nth-child(2), .control-panel .control-group:nth-child(3) { flex: 1 1 30%; }.speed-control { flex: 1 1 100% !important; }.board-wrap { padding: 12px 0; }.board { min-height: 300px; }.board-actions { gap: 8px; }.direction-note { display: none; }.rotate-screen { display: inline-flex !important; }.board-wrap::before { display: block; margin: 0 0 5px; color: #e9b667; content: '↻  Putar HP ke landscape untuk pengalaman terbaik'; font-size: .68rem; letter-spacing: .04em; text-align: center; }.creator-credit { display: none; }.language-picker { bottom: 8px; left: 8px; transform: scale(.9); transform-origin: bottom left; } }
@keyframes inactive-path-glow { from { filter: brightness(1); } to { filter: brightness(1.35); } } @keyframes store-white-glow { from { filter: brightness(1.2); } to { filter: brightness(1.8); } }
/* Compact header: brand left, game title right. */
.hero { display: none; }
.brand-bar { min-height: 58px; }
.brand-mark img { width: 48px; height: 48px; }
.game-title { margin: 0 0 0 auto; color: #f5e7c7; font-family: Georgia, serif; font-size: clamp(1.65rem, 4vw, 2.6rem); letter-spacing: -.04em; line-height: 1; }
.sepuh-mode .game-title { color: #f0c078; text-shadow: 0 0 18px #bc713e99; }
.mobile-duel .duel-split { display: block; padding: 0; border: 0; background: transparent; }.mobile-duel .duel-board-two { display: none !important; }.mobile-duel #rotate-board { display: inline-flex !important; }.board.rotated .house:hover:not(:disabled), .board.rotated .house.can-play { transform: rotate(180deg) translateY(-4px); }.board.rotated .house > *, .board.rotated .store > * { transform: rotate(180deg); }
.duel-split .perspective-two .house > *, .duel-split .perspective-two .store > * { transform: rotate(180deg); }
@media (orientation: landscape) and (pointer: coarse) { body { overflow-x: hidden; }.app-shell { width: min(900px, 100vw); margin: 0 auto; padding: 8px 18px 84px; }.brand-bar { width: 100%; }.control-panel, .game-info, .board-actions { width: min(820px, 100%); margin-left: auto; margin-right: auto; }.control-panel { justify-content: center; }.board-wrap { display: flex; justify-content: center; width: 100%; padding: 10px 0; }.board-wrap .board { width: min(820px, 100%); min-height: 270px; }.trivia-card { display: none; }.creator-credit { width: min(900px, 100%); margin-left: auto; margin-right: auto; } }
@media (pointer: coarse) { body.mobile-duel.player-one-turn .board { background: linear-gradient(145deg, #9c6338, #6b3d28); box-shadow: inset 0 0 0 3px #f0c875, inset 0 0 42px #3a2018, 0 0 28px #e9b66788, 0 18px 25px #0006; } body.mobile-duel.player-two-turn .board { background: linear-gradient(145deg, #3f6d5c, #23483e); box-shadow: inset 0 0 0 3px #b8e2ca, inset 0 0 42px #102d29, 0 0 28px #85b4a088, 0 18px 25px #0006; } body.mobile-duel.player-one-turn .house.can-play { box-shadow: inset 0 8px 11px #080706, 0 0 0 2px #e9b667, 0 0 20px #e9b667, 0 4px 0 #d18a48; } body.mobile-duel.player-two-turn .house.can-play { box-shadow: inset 0 8px 11px #080706, 0 0 0 2px #b8e2ca, 0 0 20px #85b4a0, 0 4px 0 #6fa58d; } }
.control-panel + .game-info { margin-top: 36px; }
@media (max-width: 680px) { .control-panel + .game-info { margin-top: 24px; } }