@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

/* Character puzzles use a comic-card grid, with textual result labels as well as color. */
.game-view{background:#102139;isolation:isolate}
.game-view header{background:#06111de6;border-bottom-color:#61718855;backdrop-filter:blur(14px)}
.game-view footer{background:#06111dcc;border-color:#61718855}
.game-view .wordmark{color:white}
.universe-backdrop{position:fixed;inset:0;z-index:-1;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:50vh;overflow:hidden;pointer-events:none;background:#132c48}
.universe-backdrop img{height:100%;width:100%;object-fit:cover;object-position:50% 25%;filter:saturate(.7);opacity:.35}
.universe-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0a1b30b8,#0b2035d4 60%,#061321ec)}
.game-main{width:min(1420px,calc(100% - 64px));padding-top:26px}
.game-view .breadcrumb{margin-bottom:24px;color:#d3dce7}
.game-heading{justify-content:center;text-align:center;align-items:center;position:relative;margin-bottom:30px}
.game-heading .eyebrow{justify-content:center}
.game-heading h1{font-family:'Patrick Hand',cursive;font-size:3.7rem;letter-spacing:0;line-height:1.05;text-transform:uppercase;text-shadow:0 3px 0 #0006}
.game-heading p{color:#d0dbea}
.game-heading .puzzle-number{position:absolute;right:0;background:#07121dbd;border-color:#7a8a9c55}
.game-layout{display:flex;flex-direction:column;gap:26px}
.play-area .guess-label,.play-area .guess-form,.play-area .input-message{width:min(650px,100%);margin-left:auto;margin-right:auto}
.game-view .guess-label{font-size:1rem}
.game-view input{background:#061321f0;border:2px solid #8494a8;border-radius:12px;height:60px}
.game-view input:focus{border-color:var(--accent)}
.game-view .guess-form>.submit-button{border:2px solid #ffffff75;border-radius:12px;min-width:105px;font-size:1rem}
.game-view .suggestions{background:#10273c;border:2px solid #8192a5;top:68px;border-radius:12px}
.game-view .suggestion{align-items:center;justify-content:flex-start;padding:8px 12px;gap:14px;font-weight:600}
.game-view .suggestion:hover,.game-view .suggestion[aria-selected=true]{background:#28465f}
.option-portrait{display:block;width:42px;height:42px;object-fit:cover;object-position:50% 20%;border-radius:7px;flex-shrink:0;background:#243b50}
.game-view .legend{justify-content:center;font-size:.875rem;color:#e7edf6;margin:8px 0 18px}
.legend .match{background:#1e7858}.legend .miss{background:#8d2b2e}.legend .partial{background:#95721e}
.game-view .legend i{border:1px solid #b3bfcca0;width:16px;height:16px;border-radius:4px}
.board-scroll{overflow-x:auto;overflow-y:hidden;border:0;border-radius:0;padding:0 0 6px;scrollbar-color:#7e93ae #071827;scrollbar-width:thin}
.board{border-collapse:separate;border-spacing:14px 14px;min-width:1040px;width:100%;margin:0;table-layout:fixed}
.board thead th{background:#04101bc9;border:0;padding:14px 10px;color:#f2f4fa;font-family:'Patrick Hand',cursive;font-size:1.5rem;text-transform:uppercase;font-weight:400;line-height:1.15;letter-spacing:.02em;vertical-align:middle}
.board thead th:first-child{width:auto;text-align:center;padding-left:10px;border-radius:10px 0 0 10px}
.board thead th:last-child{border-radius:0 10px 10px 0}
.board td,.board .character-cell{padding:0;border:0;vertical-align:top;background:none;text-align:center}
.portrait-frame{aspect-ratio:1;border-radius:18px;overflow:hidden;background:#071b30;border:3px solid #aab5c5bf;box-shadow:0 4px 10px #0003}
.character-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.character-portrait.portrait-art{object-fit:contain;object-position:center;padding:8px}
.option-portrait.portrait-art{object-fit:contain;object-position:center}
.portrait-missing{display:flex;align-items:center;justify-content:center;font-family:'Patrick Hand',cursive;color:#d8e2ed;background:#17364f;font-size:2.5rem}
.option-portrait.portrait-missing{font-size:1rem}
.character-name{display:block;margin-top:9px;color:white;font-size:.9375rem;font-weight:700;line-height:1.3}
.board .character-cell small{color:#c7d1dd;margin-top:3px;font-size:.75rem}
.clue-tile{aspect-ratio:1;min-height:140px;border:3px solid #b0bbcbbf;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 9px;box-shadow:0 4px 10px #0003;position:relative;color:#fff}
.clue-match{background:#1e7858}.clue-miss{background:#8d2b2e}.clue-partial{background:#95721e}
.clue-higher,.clue-lower{background:#5725a1}
.legend .direction{background:#5725a1}
body:is([data-universe^="dragon-ball"],[data-universe^="naruto"]) .board{min-width:1280px}
body:is([data-universe^="dragon-ball"],[data-universe^="naruto"]) .legend{flex-wrap:wrap}
.clue-value{font-family:'Patrick Hand',cursive;font-size:clamp(1.2rem,1.65vw,1.6rem);font-weight:400;line-height:1.22;text-transform:uppercase;overflow-wrap:normal;word-break:normal}
.clue-state{font-family:'DM Sans',sans-serif;font-size:.75rem;letter-spacing:0;color:#fff;opacity:.8;margin-top:12px}
.game-view .scroll-note{text-align:center;color:#c5d3e2;margin-top:5px}
.hint-panel{margin:24px 14px 20px;background:#061523b8;border:1px solid #8c9cb050;border-radius:13px;padding:17px 18px}
.hint-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.hint-heading h2{font-family:'Patrick Hand',cursive;font-size:1.5rem;margin:0;font-weight:400}
.hint-heading>span{font-size:.8125rem;color:#c4d3e2}
.hint-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hint-card{padding:14px;border:1px dashed #8c9cb065;border-radius:9px;background:#06162580}
.hint-card.unlocked{border:1px solid #b9d79b90;background:#284337de}
.hint-label{font-size:.75rem;color:#bbcbdc;font-weight:600}
.hint-card.unlocked .hint-label{color:#d9f0c1}
.hint-card p{font-size:.9375rem;line-height:1.5;margin:7px 0 0;color:#d5dfeb;overflow-wrap:anywhere}
.hint-button{width:100%;min-height:48px;background:transparent;border:0;border-radius:6px;font-size:.9375rem;font-weight:600;color:#d9f0c1;padding:10px}
.hint-button:disabled{color:#c1cedb;opacity:1;cursor:default;font-weight:400}
.hint-button:not(:disabled):hover{background:#ffffff14}
.hint-card p:first-child{margin:0;min-height:48px;display:flex;align-items:center}
@media(max-width:700px){.hint-panel{margin:20px 0 12px;padding:14px}.hint-heading{align-items:flex-start;flex-direction:column;gap:4px}.hint-grid{grid-template-columns:1fr}.hint-card{padding:11px 13px}.hint-card p{margin-top:4px}}
.game-view .empty-board{border:2px dashed #91a5bc80;background:#081a2aab;border-radius:16px;padding:48px 20px;min-height:244px;color:#cbd7e5}
.game-view .empty-board strong{font-family:'Patrick Hand',cursive;font-size:1.75rem;font-weight:400}
.game-view .empty-symbol{font-family:'Patrick Hand',cursive;font-size:3.5rem}
.game-view .result-panel{width:min(650px,100%);margin-left:auto;margin-right:auto;backdrop-filter:blur(8px);background:#103f2dec;border:2px solid #6ca783;border-radius:14px}
.game-view .result-panel.lost{background:#572325ed;border-color:#bd7277}
.game-view .result-panel h2{font-family:'Patrick Hand',cursive;font-size:2rem;letter-spacing:0}
.game-view .reset-line{color:#cbd7e5}
.game-view .side-panel{border:1px solid #8c9cb045;border-radius:12px;padding:20px 24px;background:#061523b8;display:grid;grid-template-columns:155px 1fr;gap:16px;align-items:start}
.game-view .side-panel h2{font-family:'Patrick Hand',cursive;font-size:1.4rem;font-weight:400;margin:0}
.game-view .side-panel ol{display:flex;gap:30px;color:#cbd7e5;margin:0}
.game-view .side-panel li{flex:1;margin:0;padding-left:3px}
.game-view .side-panel .scope-note{grid-column:1/-1;margin:0;padding-top:13px;color:#bbcbdc;border-color:#8c9cb030}
.game-view .scope-note br{display:none}.game-view .scope-note strong{margin-right:12px}
@media(min-width:1800px){.game-main{width:min(1700px,calc(100% - 80px))}.clue-value{font-size:1.9rem}.board thead th{font-size:1.8rem}}
@media(max-width:1100px){.game-heading .puzzle-number{position:static}.game-heading{justify-content:space-between;text-align:left}.game-heading .eyebrow{justify-content:flex-start}.game-view .side-panel{grid-template-columns:1fr}.game-view .side-panel ol{gap:26px}.board{min-width:960px}.clue-value{font-size:1.3rem}.game-view .scroll-note{display:block}}
@media(max-width:700px){.game-main{width:calc(100% - 28px);padding-top:22px}.game-heading h1{font-size:2.6rem}.game-heading p{font-size:.875rem;line-height:1.6}.game-heading .puzzle-number{font-size:.75rem;padding:10px 8px}.game-heading .puzzle-number strong{font-size:.875rem}.game-heading{gap:14px;margin-bottom:26px}.game-view input{height:56px;padding-left:12px}.game-view .guess-form>.submit-button{min-width:80px;padding:0 14px;font-size:.9375rem}.game-view .guess-label{font-size:.875rem}.game-view .legend{gap:17px;font-size:.8125rem}.board{min-width:880px;border-spacing:10px 12px;width:100%;margin:0}.board thead th{font-size:1.2rem;padding:12px 8px}.clue-tile,.portrait-frame{border-width:2px;border-radius:13px}.clue-tile{min-height:130px;padding:10px 8px}.clue-value{font-size:1.22rem}.clue-state{font-size:.75rem;margin-top:9px}.character-name{font-size:.875rem}.game-view .side-panel{padding:18px}.game-view .side-panel ol{display:block}.game-view .side-panel li{margin-bottom:10px}.game-view .scope-note br{display:block}.game-view .result-panel h2{font-size:1.6rem}.universe-backdrop{grid-template-columns:repeat(3,1fr);grid-auto-rows:35vh}.game-view .empty-board{padding:35px 16px;min-height:220px}}

body[data-universe^="naruto"] .clue-value{font-size:1rem;line-height:1.15}
body[data-universe^="naruto"] .clue-tile{padding:10px 8px}
body[data-universe^="naruto"] .clue-state{margin-top:8px}

/* Shared DB colors and Naruto arrow silhouettes. */
.clue-match,.legend .match{background:#00d773}
.clue-partial,.legend .partial{background:#ffc900}
.clue-miss,.legend .miss{background:#ff6269}
.clue-higher,.legend .after{background:linear-gradient(to bottom,#00d773,#ff6269)}
.clue-lower,.legend .before{background:linear-gradient(to bottom,#ff6269,#00d773)}
.clue-tile{color:#17212c;isolation:isolate;overflow:hidden}
.clue-value{position:relative;z-index:1;font-weight:600}
.clue-higher:before,.clue-lower:before,.legend .after:before,.legend .before:before{content:'';position:absolute;inset:8%;background:#192735;opacity:.3;clip-path:polygon(50% 0,100% 42%,72% 42%,72% 100%,28% 100%,28% 42%,0 42%);z-index:0}
.clue-lower:before,.legend .before:before{transform:rotate(180deg)}
.result-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:24px;margin:30px auto 0!important;padding:22px;background:#061523cf;border:1px solid #8c9cb050;border-radius:13px}
.result-legend span{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff}
.game-view .result-legend i{width:54px;height:54px;position:relative;overflow:hidden;border-radius:10px;border:2px solid #ffffff75}
@media(max-width:700px){.result-legend{gap:15px;padding:17px 10px}.game-view .result-legend i{width:42px;height:42px}}

body[data-universe^="naruto"] .board{min-width:1600px}

.universe-modes{display:flex;justify-content:center;gap:8px;margin:0 auto 24px;flex-wrap:wrap}.universe-modes a{padding:10px 22px;border:1px solid #8c9cb080;border-radius:9px;background:#061523;color:#d5dfeb;font-weight:700}.universe-modes a.active{background:var(--accent);color:#17212c;border-color:var(--accent)}.universe-modes a:hover{border-color:var(--accent)}

.nature-icons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:132px;margin:auto}.nature-icon{display:block;width:38px;height:38px;object-fit:contain;flex:0 0 38px}

body:is([data-universe^="dragon-ball"],[data-universe^="pokemon"],[data-universe="digimon"],[data-universe="inuyasha"]) .clue-value{font-size:1rem;line-height:1.2}

body[data-universe="digimon"] .clue-value{font-size:1rem;line-height:1.15}body[data-universe="digimon"] td:nth-child(5) .clue-value{font-size:.875rem}

body:is([data-universe^="ben-10"],[data-universe="like-a-dragon"],[data-universe="zelda"],[data-universe="mario"]) .clue-value{font-size:1rem;line-height:1.2}

body[data-universe="pokemon-creatures"] :is(.character-portrait,.option-portrait){image-rendering:pixelated}