:root{color-scheme:light;--ink: #191816;--muted: #716c62;--line: #d5cfc1;--paper: #f3efe4;--surface: #fbf8f0;--matte: #e8e1d5;--accent: #964b32;--correct: #55704f;--wrong: #a57222}*{box-sizing:border-box}html,body,#root{min-height:100%}body{min-height:100vh;margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit}.app{width:min(1500px,calc(100vw - 32px));min-height:100vh;margin:0 auto;padding:24px 0 32px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:18px}.topbar{display:flex;align-items:end;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:16px}.title-block{min-width:0;display:grid;gap:14px}h1{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,3.8vw,4rem);line-height:.95;letter-spacing:0}.mode-switch{width:max-content;max-width:100%;display:inline-grid;grid-template-columns:repeat(2,minmax(86px,1fr));gap:0;padding:0;border:1px solid var(--line);border-radius:2px;background:transparent}.mode-switch button{min-height:44px;padding:0 13px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:900}.mode-switch button:last-child{border-right:0}.mode-switch button.active{background:var(--ink);color:#fff}.mode-switch button:disabled{cursor:default;opacity:.66}.scoreboard{display:flex;align-items:stretch;gap:10px;flex:0 0 auto}.score-stat{min-width:92px;padding:4px 0 4px 14px;display:grid;align-content:center;gap:5px;border-left:1px solid var(--line)}.score-stat>span{color:var(--muted);font-size:.74rem;font-weight:700;text-transform:uppercase}.score-stat strong{font-size:1.8rem;line-height:1}.strike-marks{display:flex;gap:5px;color:var(--ink)}.strike-marks span{opacity:.17}.strike-marks span.active{color:var(--wrong);opacity:1}.match{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch;gap:16px;overflow:visible}.art-card{position:relative;min-width:0;display:grid;grid-template-rows:minmax(260px,1fr) auto;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--surface);will-change:transform,opacity}.card-choice{position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}.card-choice:disabled{cursor:default}.card-choice:focus-visible{outline:3px solid var(--ink);outline-offset:-4px}.match.transitioning{pointer-events:none}.match.transitioning.from-right .known{animation:old-anchor-out .42s ease both}.match.transitioning.from-right .challenger{z-index:2;animation:right-anchor-to-left .42s cubic-bezier(.22,.61,.36,1) both}.match.entering .challenger{animation:challenger-fade-in .26s ease-out both}.match.entering .known{animation:anchor-settle .26s ease-out both}@keyframes old-anchor-out{to{opacity:0;transform:translate(-18px) scale(.985)}}@keyframes right-anchor-to-left{to{transform:translate(calc(-100% - 88px))}}@keyframes challenger-fade-in{0%{opacity:0;transform:translate(18px) scale(.99)}}@keyframes anchor-settle{0%{opacity:.96;transform:translate(-10px)}}.image-frame{position:relative;min-height:0;width:100%;background:var(--matte);overflow:hidden}.art-card:has(.card-choice:not(:disabled):hover) .image-frame img{transform:scale(1.015)}.image-frame img{width:100%;height:100%;min-height:260px;display:block;object-fit:contain;transition:transform .18s ease}.art-copy{min-height:164px;padding:16px 18px 18px;border-top:1px solid var(--line)}.label{margin:0 0 4px;color:var(--muted);font-size:.76rem;font-weight:800;text-transform:uppercase}.price{margin:0 0 10px;color:var(--accent);font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,3.5vw,3.8rem);font-weight:700;line-height:.96;overflow-wrap:anywhere}.price.hidden{color:var(--ink)}h2{margin:0;font-size:clamp(1.05rem,1.45vw,1.45rem);line-height:1.12;letter-spacing:0}.meta{margin:8px 0 0;color:var(--muted);font-size:.95rem;line-height:1.35}.versus{align-self:center;justify-self:center;display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--line);border-radius:50%;background:var(--ink);color:#fff;font-size:.86rem;font-weight:900}.art-card.correct{z-index:2;outline:3px solid var(--correct);box-shadow:0 0 0 6px #55704f33}.art-card.wrong{z-index:2;outline:3px solid var(--wrong);box-shadow:0 0 0 6px #a5722233}.art-card.selected{border-color:var(--ink)}.game-over{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:2px;background:var(--surface)}.game-over div{min-width:0;display:grid;gap:4px}.game-over strong{color:var(--accent);font-size:1.25rem}.game-over span{color:var(--ink);line-height:1.35}.game-over small{color:var(--muted);font-weight:800;text-transform:uppercase}.game-over-button{min-height:52px;padding:0 18px;border:0;border-radius:2px;background:var(--ink);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:900;white-space:nowrap}.game-over-actions{flex:0 0 auto;display:flex;align-items:center;gap:10px}.game-over-button.secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}@media(min-width:861px){html,body,#root{height:100%}body{overflow:hidden}.app{height:100svh;min-height:0}.match{align-items:start}.art-card{grid-template-rows:minmax(220px,min(58svh,640px)) auto;max-height:calc(100svh - 150px)}.image-frame img{min-height:0}}@media(max-width:860px){html,body,#root{height:100%}body{overflow:hidden}.app{width:min(100vw - 20px,680px);height:100dvh;min-height:0;padding:8px 0;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}.topbar{align-items:center;flex-direction:row;gap:10px;padding-bottom:8px}.title-block{gap:7px}h1{font-size:clamp(1.25rem,7vw,1.7rem);line-height:1}.mode-switch{grid-template-columns:repeat(2,minmax(64px,1fr))}.mode-switch button{min-height:44px;padding:0 8px;font-size:.72rem}.scoreboard{width:auto;gap:5px;flex:0 0 auto}.score-stat{min-width:57px;padding:3px 0 3px 8px;gap:3px}.score-stat>span{font-size:.58rem;line-height:1;white-space:nowrap}.score-stat strong{font-size:1.15rem}.strike-marks{gap:3px}.match{min-height:0;height:100%;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 34px minmax(0,1fr);gap:5px}.versus{width:34px;height:34px;margin:-2px 0;font-size:.68rem}.art-card{min-height:0;grid-template-rows:minmax(0,1fr) auto}.match.transitioning.from-right .known{animation:old-anchor-out-mobile .42s ease both}.match.transitioning.from-right .challenger{animation:right-anchor-to-left-mobile .42s cubic-bezier(.22,.61,.36,1) both}.match.entering .challenger{animation:challenger-fade-in-mobile .26s ease-out both}.match.entering .known{animation:anchor-settle-mobile .26s ease-out both}@keyframes old-anchor-out-mobile{to{opacity:0;transform:translateY(-10px) scale(.985)}}@keyframes right-anchor-to-left-mobile{to{transform:translateY(calc(-100% - 44px))}}@keyframes challenger-fade-in-mobile{0%{opacity:0;transform:translateY(12px) scale(.99)}}@keyframes anchor-settle-mobile{0%{opacity:.96;transform:translateY(-8px)}}.image-frame img{min-height:0}.art-copy{min-height:0;padding:8px 10px 9px}.label{margin-bottom:2px;font-size:.56rem}.price{margin-bottom:5px;font-size:clamp(1.35rem,7vw,2rem)}h2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.9rem;line-height:1.08}.meta{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}.game-over{position:sticky;bottom:10px;z-index:5;align-items:flex-start;flex-direction:column;text-align:left}.game-over-actions{width:100%;flex-direction:column;gap:8px}.game-over-button{width:100%}}