:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; --paper:#f7f5ee; --ink:#2b2927; --soft:#76726b; }
* { box-sizing:border-box; }
body { margin:0; min-width:300px; background:var(--paper); color:var(--ink); }
.page { width:min(100%,1050px); margin:0 auto; padding:27px 18px 40px; }
h1 { font-size:30px; text-align:center; font-weight:700; margin:10px 0 5px; letter-spacing:.2px; }
.hint { margin:0; text-align:center; font-size:13px; color:var(--soft); }
.info { display:flex; justify-content:center; gap:25px; font-size:14px; margin:19px 0 0; }
.info strong { font-variant-numeric:tabular-nums; }
.playfield { position:relative; height:min(60vh,550px); min-height:280px; overflow:hidden; }
.figure-holder { position:absolute; width:120px; height:120px; left:calc(50% - 60px); top:calc(50% - 60px); }
.figure-holder img { display:block; width:120px; height:120px; object-fit:contain; cursor:pointer; user-select:none; -webkit-user-drag:none; }
.figure-holder img:focus-visible { outline:2px solid #b85a18; outline-offset:4px; border-radius:5px; }
.reward { position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); font-size:20px; font-weight:700; color:#3e872e; pointer-events:none; }
.status { margin:8px 0 0; text-align:center; font-size:13px; color:#6e6a62; min-height:22px; }
.modal[hidden], .reward[hidden] { display:none!important; }
.modal { position:fixed; z-index:100; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(32,30,27,.57); }
.modal-dialog { width:min(100%,408px); background:#fffdfa; color:#262626; border:1px solid #a5a098; box-shadow:0 14px 35px rgba(0,0,0,.23); }
.modal-header { padding:13px 18px; border-bottom:1px solid #d6d1c9; }
.modal-header h2 { margin:0; font-size:18px; font-weight:700; }
.modal-body { padding:18px; }
.modal-body>p:first-child { font-size:14px; margin:0 0 18px; line-height:1.5; }
.turnstile-container { display:flex; justify-content:flex-start; align-items:center; min-height:72px; max-width:100%; }
.challenge-state { color:#635f58; font-size:12px; margin:12px 0 14px; line-height:1.5; }
.anyanswer, .retry-button { border:1px solid #8c877c; padding:9px 20px; border-radius:3px; font:700 14px Arial,sans-serif; background:#e8e2d9; cursor:pointer; }
.anyanswer { width:100%; }
.anyanswer:not(:disabled):hover, .retry-button:hover { background:#d8e6cf; border-color:#6b9963; }
.anyanswer:disabled { opacity:.5; cursor:not-allowed; }
.retry-button { display:block; margin:0 0 12px; font-weight:400; }
.retry-button[hidden] { display:none; }
@media(max-width:540px){ .page{padding:16px 10px 25px;} h1{font-size:26px;} .info{margin-top:22px;} .playfield{height:58vh;min-height:280px;} .modal-body{padding:14px;} }

/* Látható, oldalfrissítés nélküli játékmód-váltó. */
.mode-switch { display:flex; gap:10px; justify-content:center; margin:21px 0 0; }
.mode-button { min-width:132px; padding:10px 16px; border:1px solid #cdbb9e; border-radius:9px; background:#fffdf8; color:#574b3d; font:700 14px Arial, sans-serif; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s; }
.mode-button:hover { background:#fff0d7; border-color:#be7a39; }
.mode-button.selected { background:#c66b22; color:#fff; border-color:#a9561a; box-shadow:0 3px 9px rgba(135,75,25,.2); }
.mode-button:focus-visible { outline:3px solid #74431f; outline-offset:3px; }
.mode-info { margin:8px 0 0; text-align:center; color:#70675c; font-size:12px; }