:root { --shell-pink: #ef7082; --shell-blue: #58c7d7; --shell-gold: #f7c948; }
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
.shell-game-shell { padding-bottom: 90px; }
.game-card { overflow: hidden; border: 2px solid var(--line); background: var(--panel); box-shadow: 8px 8px 0 var(--shadow); }
.game-heading { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 34px; padding: 38px; border-bottom: 2px solid var(--line); }
.game-heading h1 { max-width: 800px; margin: 7px 0 12px; font-size: clamp(2.2rem,6.5vw,5.4rem); line-height: .92; letter-spacing: -.07em; overflow-wrap: anywhere; }
.eyebrow,.section-kicker,.stage-kicker { margin: 0; color: var(--gold); font-size: .73rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.lede { max-width: 720px; margin: 0; color: var(--muted); font-size: 1.03rem; line-height: 1.7; }
.round-box { min-width: 0; padding: 18px; align-self: start; border: 2px solid var(--line); background: #191422; box-shadow: 5px 5px 0 var(--shadow); }
.round-box > span { display: block; margin-bottom: 13px; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.round-box strong { color: var(--gold); font-size: 1.45rem; }
.mode-panel { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 17px 38px; border-bottom: 2px solid var(--line); background: #181320; }
.mode-panel p { max-width: 620px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.55; text-align: right; }
.mode-switch { display: inline-flex; flex: none; border: 2px solid var(--line); }
.mode-switch button { min-height: 38px; padding: 0 16px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .7rem; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.mode-switch button + button { border-left: 2px solid var(--line); }
.mode-switch button[aria-pressed="true"] { background: var(--gold); color: #21190e; }
.mode-switch button:focus-visible { position: relative; z-index: 2; outline: 3px solid var(--blue); outline-offset: 2px; }
.mode-switch button:disabled { cursor: default; opacity: .65; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 2px solid var(--line); }
.stat { min-width: 0; padding: 18px 12px; text-align: center; }
.stat + .stat { border-left: 2px solid var(--line); }
.stat span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .1em; }
.stat strong { color: var(--ink); font-size: clamp(1rem,3vw,1.35rem); overflow-wrap: anywhere; }
.game-stage { position: relative; min-height: 610px; padding: 34px 18px 28px; background-color: #100d17; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: 16px 16px; }
.stage-copy { min-height: 113px; text-align: center; }
.stage-copy h2 { margin: 8px 0 7px; font-size: clamp(1.65rem,4.8vw,3.15rem); line-height: 1; letter-spacing: -.045em; }
.stage-copy > p:last-child { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.shuffle-meter { display: flex; width: min(560px,94vw); margin: 5px auto 0; justify-content: space-between; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.shuffle-meter strong { color: var(--shell-blue); }
.cup-board { --cup-width: 29%; position: relative; width: min(600px,94vw); height: 250px; margin: 5px auto 0; overflow: hidden; }
.cup-button { position: absolute; z-index: 2; top: 8px; left: calc(var(--slot) * 35.5%); width: var(--cup-width); height: 210px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: default; touch-action: manipulation; transition: left var(--swap-duration,520ms) cubic-bezier(.38,.05,.18,1); }
.cup-button[data-slot="0"] { --slot: 0; }
.cup-button[data-slot="1"] { --slot: 1; }
.cup-button[data-slot="2"] { --slot: 2; }
.cup-button.is-over { z-index:5; }
.cup-button.is-under { z-index:3; }
.cup-button.is-over .pixel-cup { transform:translate(-50%,-18px); }
.cup-button.is-under .pixel-cup { transform:translate(-50%,8px); }
.game-stage[data-state="answer"] .cup-button { cursor: pointer; }
.cup-button:focus-visible { outline: 4px solid var(--shell-blue); outline-offset: -4px; }
.pixel-cup { position: absolute; z-index: 4; top: 55px; left: 50%; width: min(110px,74%); height: 120px; transform: translateX(-50%); transition: transform 260ms steps(4,end),filter 130ms linear; }
.pixel-cup::before { position: absolute; inset: 18px 12px 6px; content: ""; border: 5px solid #ff9aaa; border-top: 0; background: linear-gradient(90deg,#a9455d 0 13%,#d85d75 13% 27%,#ef7082 27% 73%,#c95169 73% 88%,#8f354b 88%); clip-path: polygon(10% 0,90% 0,100% 100%,0 100%); box-shadow: inset 0 -10px 0 rgba(70,20,42,.34); }
.pixel-cup::after { position: absolute; top: 8px; left: 2px; width: calc(100% - 4px); height: 24px; content: ""; border: 5px solid #ffacb9; background: #c84f67; box-shadow: 0 6px 0 #74283d; }
.pixel-cup > span { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 14px; border: 4px solid #ff9aaa; background: #a63c55; box-shadow: 0 5px 0 #451527; }
.hidden-object { position: absolute; z-index: 3; bottom: 31px; left: 50%; display: grid; width: 42px; height: 42px; place-items: center; transform: translateX(-50%) scale(0); color: var(--shell-gold); font-size: 2rem; line-height: 1; opacity: 0; transition: opacity 120ms linear,transform 180ms steps(3,end); filter: drop-shadow(0 4px 0 #6c5110); }
.cup-button.has-object .hidden-object { opacity: 1; transform: translateX(-50%) scale(1); }
.game-stage[data-state="reveal"] .cup-button.has-object .pixel-cup { transform: translate(-50%,-42px); }
.game-stage[data-state="cover"] .cup-button.has-object .hidden-object,.game-stage[data-state="shuffle"] .hidden-object,.game-stage[data-state="answer"] .hidden-object { opacity: 0; transform: translateX(-50%) scale(0); }
.cup-button.is-swapping .pixel-cup { filter: brightness(1.28) drop-shadow(0 0 10px rgba(247,201,72,.75)); }
.cup-button.is-answer .pixel-cup { filter: drop-shadow(0 0 13px rgba(247,201,72,.92)); }
.cup-button.is-answer .hidden-object { opacity: 1 !important; transform: translateX(-50%) scale(1) !important; }
.cup-button.is-correct .pixel-cup { filter: drop-shadow(0 0 15px rgba(117,220,147,.95)); }
.cup-button.is-wrong .pixel-cup { filter: grayscale(.3) drop-shadow(0 0 15px rgba(239,112,130,.95)); }
.game-stage[data-state="answer"] .cup-button:hover .pixel-cup { filter: brightness(1.15); }
.game-stage[data-state="answer"] .cup-button:active .pixel-cup { transform: translate(-50%,4px); }
.table-line { position: absolute; z-index: 1; right: 1%; bottom: 30px; left: 1%; height: 15px; border: 3px solid #75657d; background: #31263a; box-shadow: 0 7px 0 #0a0810; }
.position-labels { position:absolute; z-index:6; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(3,1fr); place-items:center; }
.position-labels kbd { display:grid; width:30px; height:26px; place-items:center; border:2px solid #73677e; background:#171220; color:#d8d1dc; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.78rem; font-weight:900; }
.deadline-track { width: min(560px,92vw); height: 12px; margin: 0 auto 16px; overflow: hidden; border: 2px solid #5e5267; background: #201928; }
.deadline-track[hidden] { display: none; }
.deadline-track span { display: block; width: 100%; height: 100%; transform-origin: left; background: var(--shell-blue); }
.deadline-track span.is-danger { background: var(--shell-pink); }
.feedback { display: flex; min-height: 50px; margin: 0 0 12px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.feedback[hidden] { display: none; }
.feedback strong { color: var(--green); font-size: 1.28rem; }
.feedback span { margin-top: 4px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.game-stage[data-state="reveal"] .primary-button,.game-stage[data-state="cover"] .primary-button,.game-stage[data-state="shuffle"] .primary-button,.game-stage[data-state="answer"] .primary-button,.game-stage[data-state="feedback"] .primary-button,.game-stage[data-state="wrong"] .primary-button { visibility: hidden; }
.game-stage[data-state="wrong"],.game-stage[data-state="game-over"] { background-color: #351521; }
.game-stage[data-state="complete"] { background-color: #2d2515; }
.control-note { margin: 16px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.7; text-align: center; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.content-section { display: grid; grid-template-columns: .85fr 1.6fr; gap: 64px; padding: 76px 18px 58px; }
.content-section h2,.info-panel h2,.faq-section h2,.related-section h2 { margin: 0; font-size: clamp(1.8rem,4vw,3rem); line-height: 1.08; letter-spacing: -.05em; }
.steps-list { margin: 0; padding: 0; border-top: 2px solid var(--line); list-style: none; }
.steps-list li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 20px 0; border-bottom: 2px solid var(--line); }
.steps-list span { color: var(--gold); font-weight: 800; }
.steps-list p,.info-panel p,.faq-list p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.reading-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.info-panel { padding: 30px; border: 2px solid var(--line); background: var(--panel); }
.info-panel h2 { margin-bottom: 22px; }
.info-panel > p:not(.section-kicker) + p { margin-top: 16px; }
.faq-section,.related-section { padding: 72px 18px 0; }
.faq-list { margin-top: 28px; border-top: 2px solid var(--line); }
.faq-list details { border-bottom: 2px solid var(--line); }
.faq-list summary { padding: 22px 44px 22px 0; color: var(--ink); cursor: pointer; font-size: 1.05rem; font-weight: 800; line-height: 1.4; }
.faq-list details p { max-width: 850px; padding: 0 0 24px; }
.related-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 28px; }
.related-links a { display: flex; min-height: 112px; min-width: 0; flex-direction: column; justify-content: space-between; padding: 18px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 800; line-height: 1.35; text-decoration: none; }
.related-links a:hover,.related-links a:focus-visible { border-color: var(--gold); outline: 0; }
.related-links small { margin-top: 12px; color: var(--muted); font-size: .76rem; font-weight: 400; }
@media (max-width:820px) { .game-heading { grid-template-columns: 1fr; } .round-box { display:flex; align-items:center; justify-content:space-between; } .round-box > span { margin:0; } .mode-panel { align-items:flex-start; flex-direction:column; } .mode-panel p { text-align:left; } }
@media (max-width:620px) { .shell-game-shell { width:min(100% - 18px,600px); padding-top:10px; } .game-heading { gap:20px; padding:24px 18px; } .game-heading h1 { font-size:clamp(1.85rem,10.3vw,3.35rem); } .game-card > .mode-panel { padding-inline:16px; } .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat:nth-child(2) { border-right:0; } .stat:nth-child(-n+2) { border-bottom:2px solid var(--line); } .game-stage { min-height:600px; padding:28px 8px 24px; } .stage-copy { min-height:130px; } .cup-board { width:min(430px,calc(100vw - 34px)); height:220px; } .cup-button { height:190px; } .pixel-cup { top:52px; width:min(96px,79%); height:105px; } .hidden-object { bottom:32px; font-size:1.7rem; } .deadline-track,.shuffle-meter { width:min(430px,calc(100vw - 42px)); } .content-section,.reading-grid { grid-template-columns:1fr; } .content-section { gap:30px; padding:58px 8px 44px; } .info-panel { padding:24px 20px; } .faq-section,.related-section { padding:58px 8px 0; } .related-links { grid-template-columns:1fr; } .related-links a { min-height:90px; } }
@media (max-width:350px) { .game-heading h1 { font-size:1.75rem; } .cup-board { width:calc(100vw - 28px); height:205px; } .pixel-cup { width:82%; height:98px; } .position-labels kbd { width:26px; height:24px; } .deadline-track,.shuffle-meter { width:calc(100vw - 34px); } }
@media (prefers-reduced-motion:reduce) { .cup-button,.pixel-cup,.hidden-object { transition:none !important; } }