:root{
  color-scheme:dark;
  --bg:#061019;--bg2:#03080d;--panel:#0a1721;--panel2:#0d1d28;
  --line:#294657;--line2:#3d647a;--ink:#eef7fb;--muted:#8ca3b0;
  --accent:#55bdf1;--accent2:#9bdcff;--gold:#d5b25d;--good:#8fd26b;--bad:#ec7168;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 50% -12%,#183146 0,#09141e 43%,#03080d 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}
body{display:grid;place-items:center}
button,a{font:inherit;color:inherit}button{touch-action:manipulation}

#eidos-shared-bg{--bg-opacity:.10;--bg-blur:7px;--bg-bright:.44;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#03080d}
#eidos-shared-bg img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;opacity:0;transform:scale(1.055);filter:saturate(.84) brightness(var(--bg-bright)) contrast(1.08) blur(var(--bg-blur));transition:opacity .75s ease,transform 3.4s ease,filter .42s ease}
#eidos-shared-bg img.active{opacity:var(--bg-opacity);transform:scale(1)}
#eidos-shared-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(3,8,13,.22),rgba(3,8,13,.34) 52%,rgba(3,8,13,.58)),radial-gradient(circle at 50% 35%,transparent 0 32%,rgba(3,8,13,.32) 78%)}

#game-shell{position:relative;z-index:2;aspect-ratio:480/710;width:min(452px,calc(100vw - 12px),calc((100dvh - 18px)*0.676));height:auto;max-height:calc(100dvh - 18px);overflow:hidden;background-image:radial-gradient(circle at 50% 31%,rgba(58,142,188,.10),transparent 38%),linear-gradient(160deg,rgba(11,25,36,.54),rgba(5,11,17,.72) 76%),var(--shared-image,none);background-size:auto,auto,cover;background-position:center,center,center;background-repeat:no-repeat;border:1px solid #315164;border-radius:10px;box-shadow:0 22px 70px rgba(0,0,0,.58)}
#game-shell:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
#game-shell:after{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:repeating-radial-gradient(circle at 50% 42%,transparent 0 46px,rgba(85,189,241,.018) 47px 48px);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(20px,-18px) scale(1.035)}}

#topbar{position:relative;z-index:10;height:50px;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:7px;padding:5px 8px;border-bottom:1px solid rgba(61,100,122,.36);background:rgba(4,10,15,.55);backdrop-filter:blur(7px)}
.brand{min-width:0;font-size:15px;font-weight:850;letter-spacing:.18em;white-space:nowrap}.brand small{display:block;margin-top:1px;color:#79b8d6;font-size:6.2px;font-weight:700;letter-spacing:.13em}.brand small #topLevelText{color:#d5b25d}
.clockbox{min-width:66px;text-align:center;color:#8fa9b8;font-size:6.5px;letter-spacing:.1em}.clockbox b{display:block;margin-top:2px;color:#f5fbff;font:800 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em}.clockbox.active b{color:#9bdcff;text-shadow:0 0 10px rgba(85,189,241,.35)}
.iconbtn{height:34px;min-width:34px;padding:0 9px;border:1px solid #31536a;border-radius:8px;background:#0a1721;display:grid;place-items:center;cursor:pointer;font-size:11px;font-weight:800;letter-spacing:.06em}.iconbtn:active{transform:scale(.97);background:#102431}

#game-area{position:relative;z-index:2;height:calc(100% - 50px);display:grid;grid-template-rows:34px minmax(382px,1fr) 78px 18px 10px;gap:5px;padding:6px 8px 8px;align-content:start}
#instruction{display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid rgba(57,92,111,.46);border-radius:9px;background:rgba(8,20,29,.76);font-size:8.4px;color:#dce9ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#instruction .info{flex:0 0 auto;width:18px;height:18px;border:1px solid #6e9eb8;border-radius:50%;display:grid;place-items:center;color:#8fc4df;font-size:10px;font-weight:800}
#instructionText{overflow:hidden;text-overflow:ellipsis}

#duel-wrap{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.duel-board{position:relative;min-width:0;border:1px solid rgba(53,89,108,.55);border-radius:10px;overflow:hidden;background:rgba(8,20,29,.08);box-shadow:inset 0 8px 28px rgba(0,0,0,.20);isolation:isolate}
.duel-board>*{position:relative;z-index:2}
.duel-board::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,20,29,calc(.86 - var(--board-clear,0)*.24)),rgba(4,11,17,calc(.80 - var(--board-clear,0)*.22)));backdrop-filter:blur(calc(8px - var(--board-clear,0)*5.8px)) brightness(calc(.68 + var(--board-clear,0)*.22)) saturate(calc(.82 + var(--board-clear,0)*.22));-webkit-backdrop-filter:blur(calc(8px - var(--board-clear,0)*5.8px)) brightness(calc(.68 + var(--board-clear,0)*.22)) saturate(calc(.82 + var(--board-clear,0)*.22));transition:background .26s ease,backdrop-filter .26s ease,-webkit-backdrop-filter .26s ease}
.duel-board::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,9,14,.32),rgba(3,9,14,.10) 38%,rgba(3,9,14,.26));pointer-events:none}
#humanBoard{--board-clear:.06}#botBoard{--board-clear:.06}
.board-head{height:43px;padding:7px 8px 5px;border-bottom:1px solid rgba(55,93,114,.4);background:rgba(6,17,25,.58)}
.board-head-row{display:flex;align-items:center;justify-content:space-between;gap:5px}.board-title{font-size:7.4px;font-weight:850;letter-spacing:.11em;color:#d9edf5}.board-sub{margin-top:2px;font-size:6.1px;letter-spacing:.07em;color:#6f8a98}.status{font-size:6px;font-weight:850;letter-spacing:.08em;color:#74b8d8;white-space:nowrap}.status.done{color:#8fd26b}.status.fail{color:#ec8c84}
.secret-bar{position:absolute;right:7px;top:24px;display:flex;gap:3px;align-items:center}.secret-dot{width:8px;height:8px;border-radius:50%;border:1px solid #38586a;background:#06131c}.secret-dot::after{content:"";display:block;width:2px;height:2px;border-radius:50%;background:#537185;margin:2px auto}.mini-secret{display:block;width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 0 4px rgba(0,0,0,.35)}.user-code{padding:1px 2px;border-radius:7px;background:rgba(4,12,18,.72)}

.rows{height:calc(100% - 43px);display:grid;grid-template-rows:repeat(12,1fr);padding:3px 5px 5px}
.attempt{display:grid;grid-template-columns:14px minmax(0,1fr) 38px;align-items:center;gap:3px;border-bottom:1px solid rgba(46,78,96,.24);min-height:0}.attempt:last-child{border-bottom:0}.attempt.active{background:linear-gradient(90deg,rgba(85,189,241,.08),transparent);box-shadow:inset 2px 0 0 rgba(85,189,241,.55)}
.attempt-no{font-size:6.5px;color:#5f7786;text-align:center}.code-pegs{display:flex;align-items:center;justify-content:flex-start;gap:3px;min-width:0}.peg{display:inline-block;width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 2px rgba(255,255,255,.34),0 1px 4px rgba(0,0,0,.28)}
.peg.empty{background:#07141d;border:1px dashed #29485a;box-shadow:none}.peg[draggable="true"],.colorbtn[draggable="true"]{cursor:grab}.peg.dragging{opacity:.45}.peg.drop-target{outline:2px solid #78d1f8;outline-offset:2px;box-shadow:0 0 10px rgba(85,189,241,.35)}.palette.drop-remove{outline:1px dashed #78d1f8;outline-offset:3px;border-radius:8px}.peg.hidden{background:radial-gradient(circle at 40% 35%,#243b48,#08141c 64%);border-color:#355566;box-shadow:inset 0 0 0 2px #0a1a24}
.c0{background:#d84e49}.c1{background:radial-gradient(circle at 35% 30%,#ffffff 0,#f5f9fc 42%,#dde7ee 72%,#bcc9d3 100%);border-color:rgba(255,255,255,.78)!important}.c2{background:#4ca467}.c3{background:#e6c54b}.c4{background:#df8241}.c5{background:#8b63b3}.c6{background:#39aaa5}.c7{background:#d85f98}
.feedback{display:grid;grid-template-columns:repeat(5,6px);grid-template-rows:6px;grid-auto-rows:6px;gap:2px;justify-content:end;align-content:center}.hintpeg{width:6px;height:6px;border-radius:50%;border:1px solid #78a9c3;background:#0b1720;box-shadow:inset 0 0 0 1px rgba(120,169,195,.18),0 0 0 1px rgba(5,10,14,.55)}.hintpeg.black{background:#050505;border-color:#d7e3e9;box-shadow:inset 0 0 0 1px #000,0 0 4px rgba(255,255,255,.42)}.hintpeg.white{background:#fbfdff;border-color:#d5dfe6;box-shadow:0 0 5px rgba(255,255,255,.56)}.feedback.positional{grid-template-columns:repeat(5,6px);grid-template-rows:6px;grid-auto-rows:6px;gap:2px;justify-content:end;align-content:center}.feedback.positional .hintpeg.unused{opacity:1}
.fade-in{animation:pegIn .23s ease both}@keyframes pegIn{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}
.feedback-in{animation:hintIn .18s ease both}@keyframes hintIn{from{opacity:0;transform:translateY(-2px) scale(.75)}to{opacity:1;transform:none}}

#input-panel{position:relative;border:1px solid rgba(53,89,108,.55);border-radius:10px;background:linear-gradient(180deg,rgba(8,20,29,.94),rgba(4,11,17,.94));padding:6px 8px;display:grid;grid-template-columns:minmax(0,1fr) 176px;gap:7px;align-items:center}
#input-left{min-width:0}.input-label{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:5px;color:#7691a0;font-size:6.5px;letter-spacing:.1em}.input-label b{color:#91cce8}.current-row{display:flex;align-items:center;gap:4px}.palette{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.colorbtn{width:25px;height:25px;border-radius:50%;border:2px solid rgba(255,255,255,.16);cursor:pointer;box-shadow:inset 0 1px 2px rgba(255,255,255,.3),0 2px 6px rgba(0,0,0,.24)}.colorbtn:active{transform:scale(.94)}.colorbtn:disabled{opacity:.3;cursor:default}
#input-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.smallbtn{min-width:0;min-height:29px;padding:5px 6px;border:1px solid #31536a;border-radius:8px;background:#0a1721;color:#dcebf1;cursor:pointer;font-size:7px;font-weight:800;letter-spacing:.08em}.smallbtn span{display:block;margin-top:2px;color:#7893a2;font-size:5.2px;font-weight:650;letter-spacing:.04em}.smallbtn.primary{border-color:#3ca6dc;background:#17618a;color:#f3fbff}.smallbtn.danger-action{border-color:#6b5360;background:linear-gradient(180deg,#241923,#151017);color:#eadce4}.smallbtn.danger-action span{color:#a58a99}.smallbtn:disabled{opacity:.32;cursor:default}

#meter-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;padding:0 3px;color:#6f8794;font-size:6.7px;letter-spacing:.09em}.meter-track{height:3px;border-radius:99px;background:#12232d;overflow:hidden}.meter-fill{height:100%;width:0;background:linear-gradient(90deg,#50b6e9,#8ed8f7);box-shadow:0 0 8px rgba(85,189,241,.45);transition:width .2s ease}.meter-value{min-width:32px;text-align:right;color:#8fbfd5}


#fairness-line{text-align:center;color:#5f7887;font-size:6.4px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#fairness-line b{color:#85cce9}

.screen{position:absolute;z-index:60;inset:0;display:none;place-items:center;padding:18px;background:radial-gradient(circle at 50% 25%,rgba(44,102,136,.24),transparent 38%),rgba(3,9,14,.95);backdrop-filter:blur(7px)}.screen.open{display:grid;animation:fade .2s ease}@keyframes fade{from{opacity:0}}
#resultScreen.open{animation:resultBackdrop .62s ease both}
#resultScreen.open .card{animation:resultCardIn .58s cubic-bezier(.2,.72,.2,1) .05s both}
#resultScreen::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,transparent 0%,rgba(85,189,241,.10) 42%,rgba(213,178,93,.07) 58%,transparent 100%);opacity:0;transform:translateX(-18%);z-index:-1}
#resultScreen.open::before{animation:resultSweep .78s ease .04s both}
@keyframes resultBackdrop{0%{opacity:0}100%{opacity:1}}
@keyframes resultCardIn{0%{opacity:0;transform:translateY(16px) scale(.975);filter:blur(3px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes resultSweep{0%{opacity:0;transform:translateX(-20%)}40%{opacity:.9}100%{opacity:0;transform:translateX(20%)}}

.card{width:min(408px,96%);max-height:94%;overflow-y:auto;overflow-x:hidden;padding:23px 20px 19px;border:1px solid rgba(77,124,150,.62);border-radius:17px;background:linear-gradient(160deg,rgba(12,29,40,.98),rgba(5,14,21,.98));text-align:center;box-shadow:0 22px 65px rgba(0,0,0,.58)}
.kicker{margin:0 0 6px;color:#55bdf1;font-size:8px;font-weight:800;letter-spacing:.27em}.card h1,.card h2{margin:0;color:#f2f8fb;font-weight:780;letter-spacing:.16em}.card h1{font-size:31px}.card h2{font-size:22px}.sub{margin:5px 0 15px;color:#80b9d5;font-size:8px;letter-spacing:.14em}.intro{margin:0 auto 15px;max-width:345px;color:#bacbd4;font-size:10.3px;line-height:1.47}.intro strong{color:#eef8fc}.rulegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 16px}.rule{padding:9px 5px;border:1px solid rgba(68,102,121,.45);border-radius:8px;background:rgba(255,255,255,.025);color:#8fa5b1;font-size:7.4px;line-height:1.28}.rule b{display:block;margin-bottom:3px;color:#d9e9f0;font-size:8.4px}.rule .glyph{display:block;color:#69c4ef;font-size:18px;margin-bottom:4px}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.bigbtn,.start-link{min-width:145px;padding:10px 15px;border-radius:999px;border:1px solid #3c6176;background:#0b1e2a;color:#e9f3f7;cursor:pointer;font-size:8.3px;font-weight:800;letter-spacing:.11em;text-decoration:none}.bigbtn.primary{border-color:#3ca6dc;background:#17618a;box-shadow:0 8px 25px rgba(23,97,138,.26)}.bigbtn.gold{border-color:#d5b25d;background:#b18e3f;color:#061019}.smallnote,.collection-note{margin:10px auto 0;max-width:340px;color:#657d8a;font-size:7.4px;line-height:1.35}
.start-actions{width:min(340px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 auto}.start-actions .bigbtn,.start-actions .start-link{min-width:0;width:100%;min-height:36px;display:inline-flex;align-items:center;justify-content:center}.start-actions .full-start-action{grid-column:1/-1}
.level-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 16px}.level-card{padding:13px 10px;border:1px solid #31536a;border-radius:11px;background:#0a1721;cursor:pointer;text-align:left}.level-card.selected{border-color:#55bdf1;background:linear-gradient(180deg,#10344a,#0a2130);box-shadow:inset 0 0 22px rgba(85,189,241,.08)}.level-card b{display:block;color:#e7f5fb;font-size:10px;letter-spacing:.11em}.level-card span{display:block;margin-top:5px;color:#7691a0;font-size:7.4px;line-height:1.35}.level-card.selected b{color:#9bdcff}
.secret-builder{margin:12px auto 15px;padding:12px;border:1px solid rgba(58,96,116,.52);border-radius:11px;background:rgba(255,255,255,.02)}.secret-builder .secret-slots{display:flex;justify-content:center;gap:8px;margin:7px 0 12px}.secret-builder .peg{width:31px;height:31px}.secret-builder .palette{justify-content:center}.secret-builder .colorbtn{width:30px;height:30px}.secret-note{margin:8px auto 0;max-width:330px;color:#6e8997;font-size:7.2px;line-height:1.35}
.result-glyph{font-size:44px;line-height:1;color:#66c7f4;text-shadow:0 0 20px rgba(85,189,241,.35);margin:2px 0 8px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0}.statcard{padding:10px;border:1px solid #2c4a5b;border-radius:9px;background:rgba(255,255,255,.025);color:#7f97a4;font-size:7px;letter-spacing:.1em}.statcard b{display:block;margin-top:3px;color:#f0f8fb;font-size:17px}.statcard>span{display:block;margin-top:6px;color:#9bdcff;font:800 12px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em}.codes-reveal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.code-reveal{padding:9px;border:1px solid rgba(55,90,109,.45);border-radius:9px;background:rgba(255,255,255,.02)}.code-reveal span{display:block;color:#76909e;font-size:6.6px;letter-spacing:.1em;margin-bottom:6px}.code-reveal .code-pegs{justify-content:center}.quote{margin:14px 0 0;padding:12px;border-left:2px solid #55bdf1;background:rgba(55,124,161,.07);color:#a9c0cb;font:italic 10px/1.45 Georgia,serif;text-align:left}
.article-link{display:block;margin:14px auto 0;padding:11px 16px;width:min(330px,100%);border:1px solid rgba(213,178,93,.92);border-radius:999px;background:linear-gradient(180deg,rgba(213,178,93,.20),rgba(129,96,28,.15));box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 0 18px rgba(213,178,93,.05);color:#c9c2aa;text-decoration:none;text-align:center;line-height:1.25}.article-link span{display:block;font-size:6.7px;letter-spacing:.14em;color:#9da9a8}.article-link b{display:block;margin-top:4px;color:#f0cf73;font-size:9.2px;letter-spacing:.13em}
.engine-badge{margin:9px auto 0;width:max-content;max-width:100%;padding:6px 9px;border:1px solid rgba(85,189,241,.35);border-radius:999px;color:#79b9d6;background:rgba(28,90,121,.10);font-size:6.5px;letter-spacing:.1em}.engine-badge strong{color:#b6e8fb}#difficultyScreen .card,#secretScreen .card{width:min(430px,96%);padding:26px 24px 22px}#difficultyScreen .kicker,#secretScreen .kicker{font-size:8.8px;letter-spacing:.29em}#difficultyScreen .card h2,#secretScreen .card h2{font-size:25px;letter-spacing:.15em}#difficultyScreen .sub,#secretScreen .sub{font-size:8.8px;letter-spacing:.15em}#difficultyScreen .intro,#secretScreen .intro{max-width:362px;font-size:11.2px;line-height:1.52}#difficultyScreen .level-card b,#secretScreen .level-card b{font-size:10.6px}#difficultyScreen .level-card span,#secretScreen .level-card span{font-size:7.9px;line-height:1.4}#difficultyScreen .smallnote,#secretScreen .smallnote,#secretScreen .secret-note{font-size:7.8px;line-height:1.38;color:#7892a0}#secretScreen .secret-builder{margin-top:10px;padding:13px}#secretScreen .secret-builder .secret-slots{margin:10px 0 14px}#secretScreen .secret-builder .peg{width:33px;height:33px}#secretScreen .secret-builder .colorbtn{width:32px;height:32px}.secret-level-chooser{margin:12px auto 10px;padding:11px 12px;border:1px solid rgba(58,96,116,.52);border-radius:11px;background:rgba(255,255,255,.022)}.secret-level-title{margin:0 0 8px;color:#8fcfed;font-size:8px;font-weight:800;letter-spacing:.17em}.secret-level-cards{margin:0}.secret-level-note{margin:8px auto 0;max-width:346px;color:#8fa7b3;font-size:7.9px;line-height:1.4}.secret-level-cards .level-card.selected{box-shadow:inset 0 0 24px rgba(85,189,241,.10),0 0 0 1px rgba(85,189,241,.12)}

.dialog-card{width:min(360px,92%)}
.dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dialog-actions .bigbtn{min-width:0;width:100%}
.dialog-card.danger .bigbtn.primary{border-color:#d5b25d;background:linear-gradient(180deg,#8b6c2b,#6d541f);color:#f8f5e8;box-shadow:0 8px 24px rgba(120,89,18,.28)}
.machine-hint{max-width:80px;justify-content:flex-end}

/* Mobile pointer drag */
.peg[data-drop-kind],.colorbtn{touch-action:none;-webkit-touch-callout:none}
.touch-drag-ghost{position:fixed;z-index:20000;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(255,255,255,.34);box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 2px rgba(255,255,255,.35);pointer-events:none;opacity:.92;transform:scale(1.08)}
.touch-drop-hover{outline:2px solid #9bdcff!important;outline-offset:3px;box-shadow:0 0 14px rgba(85,189,241,.45)!important}

/* Post-game analysis */
.analysis-card{width:min(438px,98%);padding:16px 14px 14px;max-height:97%}
.analysis-card h2{font-size:19px}.analysis-card .sub{margin-bottom:8px}
.analysis-times{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0}.analysis-times>div{padding:8px;border:1px solid #2d4e61;border-radius:9px;background:rgba(255,255,255,.025)}.analysis-times span{display:block;color:#7f98a5;font-size:6.7px;letter-spacing:.11em}.analysis-times b{display:block;margin-top:3px;color:#c9efff;font:850 17px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em}
.analysis-move{min-height:24px;margin:0 0 7px;color:#b7cad3;font-size:8.5px;line-height:1.3}
.analysis-boards{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow:hidden;border-radius:10px;background-image:linear-gradient(rgba(3,9,14,.24),rgba(3,9,14,.38)),var(--shared-image,none);background-size:auto,cover;background-position:center,center;background-repeat:no-repeat}.analysis-board{--analysis-clear:.06;position:relative;overflow:hidden;border:1px solid rgba(53,89,108,.68);border-radius:10px;background:rgba(5,14,21,.04);isolation:isolate}.analysis-board>*{position:relative;z-index:2}.analysis-board::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(4,12,18,calc(.84 - var(--analysis-clear)*.16));backdrop-filter:blur(calc(7px - var(--analysis-clear)*4.6px)) brightness(calc(.72 + var(--analysis-clear)*.16));-webkit-backdrop-filter:blur(calc(7px - var(--analysis-clear)*4.6px)) brightness(calc(.72 + var(--analysis-clear)*.16));transition:background .18s ease,backdrop-filter .18s ease,-webkit-backdrop-filter .18s ease}.analysis-board::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(2,8,13,.28),rgba(2,8,13,.12) 42%,rgba(2,8,13,.30));pointer-events:none}.analysis-board-head{height:39px;padding:6px 7px;border-bottom:1px solid rgba(55,93,114,.52);background:rgba(4,12,18,.28);text-align:left}.analysis-board-head>b{display:block;color:#e5f4fa;font-size:6.7px;letter-spacing:.09em;text-shadow:0 1px 3px #000}.analysis-secret{margin-top:5px;gap:3px}.analysis-secret .peg{width:13px;height:13px}
.analysis-rows{display:grid;grid-template-rows:repeat(12,20px);padding:2px 4px}.analysis-rows .attempt{grid-template-columns:11px minmax(0,1fr) 35px;gap:2px;min-height:20px}.analysis-rows .attempt-no{font-size:5.8px;color:#91aab7;text-shadow:0 1px 2px #000}.analysis-rows .peg{width:13px;height:13px;border-color:rgba(255,255,255,.30);box-shadow:inset 0 1px 2px rgba(255,255,255,.38),0 1px 4px rgba(0,0,0,.62)}.analysis-rows .code-pegs{gap:2px}.analysis-rows .feedback{grid-template-columns:repeat(5,5px);grid-template-rows:5px;grid-auto-rows:5px;gap:1px}.analysis-rows .hintpeg{width:5px;height:5px;border-color:#9ebed1;box-shadow:inset 0 0 0 1px rgba(124,169,194,.14),0 0 0 1px rgba(0,0,0,.42)}.analysis-rows .attempt.active{background:linear-gradient(90deg,rgba(85,189,241,.16),transparent);box-shadow:inset 2px 0 0 #79d9c0}
.analysis-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}.analysis-nav .bigbtn{min-width:0;padding:8px 4px;font-size:6.8px;letter-spacing:.05em}.analysis-nav .bigbtn:disabled{opacity:.28;cursor:default}
.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-actions .bigbtn{min-width:0}

#consent-banner{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:10000;width:min(620px,calc(100vw - 24px));display:flex;align-items:center;gap:10px;padding:12px 14px;color:#ded7c1;background:rgba(7,16,12,.97);border:1px solid rgba(200,168,75,.62);border-radius:9px;box-shadow:0 12px 36px rgba(0,0,0,.5);font:12px/1.35 Arial,sans-serif;touch-action:manipulation}#consent-banner[hidden]{display:none}#consent-banner p{flex:1;margin:0}#consent-banner a{color:#79d9c0}.consent-actions{display:flex;gap:7px}.consent-btn{padding:7px 10px;color:#07100c;background:#f5d76e;border:1px solid #c8a84b;border-radius:5px;font-weight:700;cursor:pointer}.consent-btn.decline{color:#cbd3ce;background:transparent;border-color:rgba(121,217,192,.4)}

@media(max-height:640px){#topbar{height:44px}.brand{font-size:13px}.brand small{display:none}.clockbox{min-width:58px}.clockbox b{font-size:11px}#game-area{height:calc(100% - 44px);grid-template-rows:31px minmax(345px,1fr) 71px 16px 9px;gap:4px;padding-top:4px}.board-head{height:39px;padding-top:5px}.rows{height:calc(100% - 39px)}.peg{width:16px;height:16px}.colorbtn{width:22px;height:22px}.attempt{grid-template-columns:12px minmax(0,1fr) 36px}.feedback{grid-template-columns:repeat(5,5px);grid-template-rows:5px;grid-auto-rows:5px;gap:1px}.hintpeg{width:5px;height:5px}.card{padding-block:15px}}
@media(max-width:390px){#input-panel{grid-template-columns:minmax(0,1fr) 156px}.smallbtn{padding-inline:4px;font-size:6.3px}.brand{font-size:13px;letter-spacing:.12em}.brand small{display:none}.clockbox{min-width:54px}.iconbtn{padding-inline:7px}.peg{width:16px;height:16px}.code-pegs{gap:2px}.duel-board{border-radius:8px}.attempt{grid-template-columns:11px minmax(0,1fr) 34px;gap:2px}.feedback{grid-template-columns:repeat(5,5px);grid-template-rows:5px;grid-auto-rows:5px;gap:1px}.hintpeg{width:5px;height:5px}.colorbtn{width:23px;height:23px}.smallbtn{min-width:75px}.rulegrid{gap:4px}.rule{padding-inline:3px}.start-actions{width:min(316px,100%);gap:6px}.start-actions .bigbtn,.start-actions .start-link{padding-inline:7px;font-size:7.8px}#difficultyScreen .card,#secretScreen .card{width:min(95%,96%);padding:20px 16px 17px}#difficultyScreen .card h2,#secretScreen .card h2{font-size:22px}#difficultyScreen .intro,#secretScreen .intro{font-size:11.1px;line-height:1.5}#difficultyScreen .level-cards,#secretScreen .secret-level-cards{gap:7px}#difficultyScreen .level-card b,#secretScreen .level-card b{font-size:10.2px}#difficultyScreen .level-card span,#secretScreen .level-card span{font-size:7.9px}#secretScreen .secret-builder .peg{width:31px;height:31px}#secretScreen .secret-builder .colorbtn{width:30px;height:30px}}
@media(max-width:430px){#consent-banner{flex-direction:column;text-align:center}.consent-actions{justify-content:center}}
@media(prefers-reduced-motion:reduce){#game-shell:after{animation:none}.fade-in,.feedback-in,.screen.open,#resultScreen.open,#resultScreen.open .card,#resultScreen.open::before{animation:none}#eidos-shared-bg img{transition:none}}


#resultScreen .article-link.eidos-link{margin-top:7px}


@media (min-width: 900px) and (max-height: 900px){#game-shell{width:min(420px,calc(100vw - 28px),calc((100dvh - 42px)*0.676));max-height:calc(100dvh - 42px)}#topbar{height:46px;padding:7px 10px}.brand{font-size:13px}.brand small{font-size:5px}.clockbox{min-width:60px}.clockbox b{font-size:11px}#game-area{height:calc(100% - 46px);grid-template-rows:30px minmax(332px,1fr) 70px 14px 8px;gap:4px;padding:5px 7px 7px}.board-head{height:40px;padding:6px 6px 0}.board-head b{font-size:6.6px}.board-head .subnote{font-size:5.5px}.rows{height:calc(100% - 40px);padding:2px 4px 4px}.attempt{grid-template-columns:11px minmax(0,1fr) 38px;gap:2px}.attempt-no{font-size:5.6px}.peg{width:16px;height:16px}.code-pegs{gap:2px}.feedback{grid-template-columns:repeat(5,5px);grid-template-rows:5px;grid-auto-rows:5px;gap:1px}.hintpeg{width:5px;height:5px}#input-panel{padding:5px 7px;grid-template-columns:minmax(0,1fr) 170px;gap:6px}.input-label{font-size:6.4px}.input-label strong{font-size:8px}.colorbtn{width:23px;height:23px}.smallbtn{min-height:27px;padding:4px 5px;font-size:6.4px}.smallbtn span{font-size:4.9px}.meter-value{min-width:24px}#fairness-line{font-size:5.7px}.card{width:min(372px,94%);max-height:90%;padding:17px 16px 14px;border-radius:15px}.card h1{font-size:24px}.card h2{font-size:19px}.kicker{margin-bottom:4px;font-size:7px}.sub{margin:4px 0 11px;font-size:7px}.intro{margin:0 auto 11px;max-width:310px;font-size:9.3px;line-height:1.38}.rulegrid{gap:5px;margin-bottom:11px}.rule{padding:7px 4px;font-size:6.6px;line-height:1.22}.rule b{font-size:7.6px}.rule .glyph{font-size:15px;margin-bottom:2px}.start-actions{width:min(300px,100%);gap:5px}.start-actions .bigbtn,.start-actions .start-link,.bigbtn{min-width:0;min-height:32px;padding:8px 10px;font-size:7.2px}.smallnote,.collection-note,.secret-level-note,#difficultyScreen .smallnote,#secretScreen .smallnote,#secretScreen .secret-note{font-size:6.8px;line-height:1.28;margin-top:8px}.level-cards,.secret-level-cards{gap:6px;margin:9px 0 10px}.level-card{padding:10px 8px;border-radius:10px}.level-card b,#difficultyScreen .level-card b,#secretScreen .level-card b{font-size:9px}.level-card span,#difficultyScreen .level-card span,#secretScreen .level-card span{margin-top:4px;font-size:6.8px;line-height:1.28}.secret-level-chooser{margin:9px auto 8px;padding:9px 10px}.secret-level-title{margin-bottom:6px;font-size:7px}#difficultyScreen .card,#secretScreen .card{width:min(380px,94%);padding:19px 17px 15px}#secretScreen .secret-builder{margin-top:8px;padding:11px}#secretScreen .secret-builder .secret-slots{margin:8px 0 12px}#secretScreen .secret-builder .peg{width:29px;height:29px}#secretScreen .secret-builder .colorbtn{width:28px;height:28px}.result-grid,.codes-reveal{gap:6px;margin:10px 0}.statcard{padding:8px;font-size:6.3px}.statcard b{font-size:15px}.statcard>span{font-size:10px}.quote{margin-top:10px;padding:10px;font-size:9px;line-height:1.35}.article-link{margin-top:10px;padding:10px 12px}.article-link span{font-size:6.2px}.article-link b{font-size:8px}}

#startScreen h1{letter-spacing:.12em}#startScreen .sub{letter-spacing:.12em}

@media (min-width: 900px) and (max-height: 900px){
  #startScreen .card,#difficultyScreen .card,#secretScreen .card{width:min(360px,92%);max-height:88%;overflow:hidden;padding:15px 14px 13px;border-radius:14px}
  #startScreen h1{font-size:22px;letter-spacing:.10em}
  #startScreen .sub{font-size:6.7px;margin:4px 0 8px}
  #startScreen .intro{max-width:296px;font-size:8.7px;line-height:1.32;margin:0 auto 9px}
  #startScreen .rulegrid{gap:4px;margin:0 0 9px}
  #startScreen .rule{padding:6px 4px;font-size:6.2px;line-height:1.18}
  #startScreen .rule b{font-size:7.1px;margin-bottom:2px}
  #startScreen .rule .glyph{font-size:14px;margin-bottom:2px}
  #startScreen .start-actions{width:min(286px,100%);gap:4px}
  #startScreen .start-actions .bigbtn,#startScreen .start-actions .start-link{min-height:29px;padding:7px 8px;font-size:6.9px}
  #startScreen .collection-note{font-size:6.5px;line-height:1.24;margin-top:7px;max-width:298px}
  #difficultyScreen .card h2,#secretScreen .card h2{font-size:18px;letter-spacing:.12em}
  #difficultyScreen .sub,#secretScreen .sub{margin:4px 0 8px;font-size:7px}
  #difficultyScreen .intro,#secretScreen .intro{max-width:304px;font-size:8.8px;line-height:1.33;margin:0 auto 9px}
  #difficultyScreen .level-cards,#secretScreen .secret-level-cards{gap:5px;margin:8px 0 8px}
  #difficultyScreen .level-card,#secretScreen .level-card{padding:9px 8px}
  #difficultyScreen .level-card b,#secretScreen .level-card b{font-size:8.7px}
  #difficultyScreen .level-card span,#secretScreen .level-card span{font-size:6.6px;line-height:1.22}
  .secret-level-chooser{margin:8px auto 7px;padding:8px 9px}
  .secret-level-title{font-size:6.8px;margin-bottom:5px}
  .secret-level-note{font-size:6.6px;line-height:1.22;margin-top:6px}
  #secretScreen .secret-builder{margin-top:7px;padding:10px}
  #secretScreen .secret-builder .secret-slots{margin:7px 0 10px}
  #secretScreen .secret-builder .peg{width:27px;height:27px}
  #secretScreen .secret-builder .colorbtn{width:26px;height:26px}
  #secretScreen .actions .bigbtn,#difficultyScreen .actions .bigbtn{min-height:30px;padding:7px 9px;font-size:7px}
  #secretScreen .secret-note,#difficultyScreen .smallnote{font-size:6.4px;line-height:1.2;margin-top:7px}
}


/* Desktop/laptop window-fit patch: does not affect touch/mobile layouts or tall large screens. */
@media (hover:hover) and (pointer:fine) and (max-height:780px){
  body{place-items:start center;padding-top:8px;padding-bottom:8px}
  #game-shell{width:min(404px,calc(100vw - 14px),calc((100svh - 16px)*0.676),calc((100dvh - 16px)*0.676));max-height:min(calc(100svh - 16px),calc(100dvh - 16px))}
  #topbar{height:45px;padding:6px 8px;gap:6px}
  .brand{font-size:13px;letter-spacing:.15em}.brand small{font-size:5.6px}
  .clockbox{min-width:58px;font-size:6px}.clockbox b{font-size:11px}
  .iconbtn{height:32px;min-width:32px;padding:0 8px;font-size:10px}
  #game-area{height:calc(100% - 45px);grid-template-rows:30px minmax(325px,1fr) 68px 14px 8px;gap:4px;padding:5px 7px 7px}
  #instruction{font-size:7.8px;padding:0 8px}#instruction .info{width:16px;height:16px;font-size:9px}
  #duel-wrap{gap:5px}.board-head{height:39px;padding:5px 6px 4px}.board-title{font-size:6.9px}.board-sub{font-size:5.6px}.status{font-size:5.7px}
  .secret-bar{right:6px;top:22px;gap:2px}.secret-dot{width:7px;height:7px}.mini-secret{width:9px;height:9px}
  .rows{height:calc(100% - 39px);padding:2px 4px 4px}
  .attempt{grid-template-columns:11px minmax(0,1fr) 38px;gap:2px}.attempt-no{font-size:5.6px}
  .peg{width:16px;height:16px}.code-pegs{gap:2px}
  .feedback,.feedback.positional{grid-template-columns:repeat(5,5px);grid-template-rows:5px;grid-auto-rows:5px;gap:1px}.hintpeg{width:5px;height:5px}
  #input-panel{padding:5px 7px;grid-template-columns:minmax(0,1fr) 166px;gap:6px}
  .input-label{margin-bottom:4px;font-size:6.1px}.input-label strong{font-size:7.6px}
  .current-row{gap:3px}.palette{gap:3px;margin-top:4px}.colorbtn{width:22px;height:22px}
  .smallbtn{min-height:26px;padding:4px 5px;font-size:6.1px}.smallbtn span{font-size:4.8px}
  .meter-value{font-size:5.8px;min-width:22px}#fairness-line{font-size:5.4px}
  .card{width:min(356px,92%);max-height:88%;overflow-y:auto;overflow-x:hidden;padding:15px 14px 13px;border-radius:14px}
  .card h1{font-size:22px;letter-spacing:.10em}.card h2{font-size:18px;letter-spacing:.11em}
  .kicker{margin-bottom:4px;font-size:7px}.sub{margin:4px 0 8px;font-size:6.8px}
  .intro{max-width:296px;font-size:8.7px;line-height:1.32;margin:0 auto 9px}
  .rulegrid{gap:4px;margin-bottom:9px}.rule{padding:6px 4px;font-size:6.2px;line-height:1.18}.rule b{font-size:7.1px}.rule .glyph{font-size:14px}
  .start-actions{width:min(286px,100%);gap:4px}.start-actions .bigbtn,.start-actions .start-link,.bigbtn{min-height:29px;padding:7px 8px;font-size:6.9px}
  .collection-note,.smallnote,.secret-level-note,#difficultyScreen .smallnote,#secretScreen .smallnote,#secretScreen .secret-note{font-size:6.5px;line-height:1.22;margin-top:7px}
  .level-cards,.secret-level-cards{gap:5px;margin:8px 0}.level-card{padding:9px 8px}.level-card b,#difficultyScreen .level-card b,#secretScreen .level-card b{font-size:8.7px}.level-card span,#difficultyScreen .level-card span,#secretScreen .level-card span{font-size:6.6px;line-height:1.22}
  .secret-level-chooser{margin:8px auto 7px;padding:8px 9px}.secret-level-title{font-size:6.8px;margin-bottom:5px}
  #secretScreen .secret-builder{margin-top:7px;padding:10px}#secretScreen .secret-builder .secret-slots{margin:7px 0 10px}#secretScreen .secret-builder .peg{width:27px;height:27px}#secretScreen .secret-builder .colorbtn{width:26px;height:26px}
}

@media (hover:hover) and (pointer:fine) and (max-height:700px){
  #game-shell{width:min(382px,calc(100vw - 12px),calc((100svh - 12px)*0.676),calc((100dvh - 12px)*0.676));max-height:min(calc(100svh - 12px),calc(100dvh - 12px))}
  #topbar{height:42px;padding:5px 7px}.brand{font-size:12px}.brand small{display:none}
  .clockbox{min-width:54px}.clockbox b{font-size:10px}.iconbtn{height:30px;min-width:30px}
  #game-area{height:calc(100% - 42px);grid-template-rows:28px minmax(305px,1fr) 64px 13px 7px;gap:3px;padding:4px 6px 6px}
  #instruction{font-size:7.2px}.board-head{height:36px;padding:4px 5px 3px}.board-title{font-size:6.4px}.board-sub{font-size:5.2px}
  .rows{height:calc(100% - 36px);padding:2px 3px 3px}.attempt{grid-template-columns:10px minmax(0,1fr) 34px}.attempt-no{font-size:5.2px}.peg{width:15px;height:15px}
  #input-panel{grid-template-columns:minmax(0,1fr) 156px;padding:4px 6px}.colorbtn{width:21px;height:21px}.smallbtn{min-height:24px;font-size:5.8px}
}