#idoosveny { --page: #477258; --forest: #385d48; --deep: #294b39; --cream: #f4f1ea; --paper: #385d48; --gold: #d9b877; --ink: #f4efdc; --muted: #d5dfcf; --border: #6b8b70; color: var(--ink); font-family: 'Libre Franklin', "Segoe UI", Arial, sans-serif; line-height: 1.5; background: var(--page); min-height: 100vh; }
body { margin: 0; }
#idoosveny *, #idoosveny *::before, #idoosveny *::after { box-sizing: border-box; }
#idoosveny [hidden] { display: none !important; }
#idoosveny button, #idoosveny input { font: inherit; }
#idoosveny button { cursor: pointer; }
#idoosveny button:disabled { cursor: not-allowed; opacity: .5; }
#idoosveny button:focus-visible, #idoosveny a:focus-visible, #idoosveny input:focus-visible, #idoosveny [tabindex]:focus-visible { outline: 3px solid #f3cf82; outline-offset: 4px; }
#idoosveny .io-header { background: var(--forest); color: var(--cream); min-height: 105px; padding: 22px max(5vw, 24px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#idoosveny .io-brand { color: var(--gold); text-decoration: none; display: flex; align-items: center; gap: 15px; font: bold 30px Georgia, serif; }
#idoosveny .io-brand small { display: block; margin-top: 8px; font: 10px "Segoe UI", Arial, sans-serif; letter-spacing: 2px; }
#idoosveny .io-mark { display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid #d8e6c550; border-radius: 50%; color: var(--gold); font: 43px Georgia, serif; }
#idoosveny .io-header-note { font-size: 13px; color: #d5dfcf; }
#idoosveny main { max-width: 1440px; margin: auto; padding: 66px max(5vw, 24px) 60px; }
#idoosveny .io-setup { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
#idoosveny .io-eyebrow { color: #e6bb6d; font-size: 10px; font-weight: 700; letter-spacing: 2.3px; margin: 0 0 15px; }
#idoosveny h1 { color: var(--gold); font: bold 48px/1.14 Georgia, "Times New Roman", serif; letter-spacing: -1.5px; margin: 0 0 24px; }
#idoosveny h1 em { color: #f1ce89; font-weight: normal; }
#idoosveny .io-lead { font-size: 16px; color: var(--muted); max-width: 460px; margin: 0 0 29px; }
#idoosveny .io-rules { list-style: none; padding: 0; margin: 0; max-width: 470px; }
#idoosveny .io-rules li { display: flex; gap: 15px; margin: 13px 0; font-size: 13px; align-items: baseline; }
#idoosveny .io-rules li > span { color: #e6bb6d; font: 12px Georgia, serif; }
#idoosveny .io-preview { position: relative; display: flex; gap: 12px; margin: 38px 0 0; align-items: center; padding: 10px 0; }
#idoosveny .io-preview-line { position: absolute; left: -8px; right: -8px; height: 1px; background: #8eaa82; top: 50%; }
#idoosveny .io-sample { z-index: 1; width: 31%; min-height: 170px; padding: 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--paper); box-shadow: 0 5px 14px #193a3108; transform: rotate(-4deg); }
#idoosveny .io-sample:last-child { transform: rotate(4deg); }
#idoosveny .io-sample strong { display: block; font: 35px Georgia, serif; margin-top: 19px; }
#idoosveny .io-sample p { font-size: 11px; margin: 8px 0 0; }
#idoosveny .io-sample-hidden { color: var(--cream); background: var(--forest); transform: translateY(-10px); border-color: var(--forest); }
#idoosveny .io-sample-hidden strong { color: var(--gold); }
#idoosveny .io-sample-hidden .io-badge { color: #d7e3c9; background: #ffffff15; }
#idoosveny .io-selection { background: var(--paper); border: 1px solid var(--border); padding: 32px; border-radius: 16px; box-shadow: 0 12px 35px #183d3305; }
#idoosveny h2 { color: var(--gold); font: bold 26px/1.2 Georgia, serif; margin: 0 0 12px; letter-spacing: -.5px; }
#idoosveny .io-muted { font-size: 13px; color: var(--muted); margin: 0; }
#idoosveny .io-select-actions { display: flex; flex-wrap: wrap; gap: 17px; margin: 22px 0 13px; }
#idoosveny .io-text-button { background: none; border: none; padding: 0; color: var(--gold); font-size: 12px; text-underline-offset: 4px; }
#idoosveny .io-text-button:hover { text-decoration: underline; }
#idoosveny .io-categories { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
#idoosveny .io-category { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 13px; transition: background .15s, border-color .15s; }
#idoosveny .io-category:has(input:checked) { border-color: #b7c497; background: #466d52; }
#idoosveny .io-category input { accent-color: #b78536; width: 17px; height: 17px; margin: 0; flex-shrink: 0; }
#idoosveny .io-category-count { margin-left: auto; color: #d1ddc4; font-size: 11px; }
#idoosveny .io-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
#idoosveny .io-deck-summary { border-top: 1px solid var(--border); margin: 22px 0 16px; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
#idoosveny .io-deck-summary strong { font: 28px Georgia, serif; color: var(--gold); margin-right: 3px; }
#idoosveny .io-button { border: none; border-radius: 999px; padding: 13px 24px; min-height: 48px; font-size: 13px; font-weight: 600; display: inline-flex; justify-content: center; align-items: center; gap: 24px; }
#idoosveny .io-button-primary { color: #fff8e9; background: #a8782e; box-shadow: 0 5px 13px #233d2e30; }
#idoosveny .io-button-primary:hover:not(:disabled) { background: #906424; }
#idoosveny #io-start { width: 100%; justify-content: space-between; }
#idoosveny .io-button-outline { border: 1px solid #b9c8a6; background: transparent; color: var(--cream); }
#idoosveny .io-button-outline:hover { background: #385d48; }
#idoosveny .io-setup-message { color: #ffd0ba; font-size: 12px; margin: 10px 0; }
#idoosveny .io-setup-message:empty { display: none; }
#idoosveny .io-footer { border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; padding: 22px max(5vw, 24px); color: #d0dcc5; font-size: 10px; }
#idoosveny .io-game-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
#idoosveny .io-game-top h1 { font-size: 39px; margin: 0; }
#idoosveny .io-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; padding: 0; }
#idoosveny .io-stats > div:not(.io-progress) { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 83px; padding: 12px; border-radius: 12px; background: var(--forest); text-align: center; }
#idoosveny .io-stats strong { color: var(--gold); font: bold 29px Georgia, serif; }
#idoosveny .io-stats span { font-size: 11px; color: var(--muted); }
#idoosveny .io-progress { grid-column: 1 / -1; max-width: none; margin: 5px 0 0; }
#idoosveny .io-progress-track { height: 5px; border-radius: 8px; background: #365d46; margin-bottom: 8px; overflow: hidden; }
#idoosveny #io-progress-fill { height: 100%; background: #e6bb6d; border-radius: 8px; transition: width .3s; }
#idoosveny .io-play-area { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 40px; padding: 35px 0; }
#idoosveny .io-hand-zone { border-right: 1px solid var(--border); padding-right: 25px; }
#idoosveny .io-hand-hint { font-size: 12px; color: var(--muted); margin: 17px 0 0; }
#idoosveny .io-hand-hint strong { color: var(--gold); }
#idoosveny .io-card { width: 185px; min-height: 243px; border: 1px solid #749576; border-radius: 10px; background: var(--paper); padding: 16px; flex: 0 0 auto; display: flex; flex-direction: column; box-shadow: 0 4px 12px #173d3307; overflow-wrap: anywhere; }
#idoosveny .io-card-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; min-height: 22px; }
#idoosveny .io-badge { font: 9px/1.4 "Segoe UI", Arial, sans-serif; padding: 3px 6px; border-radius: 4px; background: #4d7158; color: #edf1dc; display: inline-block; }
#idoosveny .io-card-year { color: var(--gold); font: 41px/1.2 Georgia, serif; margin: 24px 0 11px; letter-spacing: -1px; }
#idoosveny .io-card-event { font-size: 13px; line-height: 1.5; margin: 0; }
#idoosveny .io-card-bottom { font-size: 8px; letter-spacing: 1.5px; border-top: 1px solid #789574; margin-top: auto; padding-top: 14px; color: #c3d5bd; }
#idoosveny .io-card-event + .io-card-bottom { margin-top: 25px; }
#idoosveny .io-card-back { width: 100%; min-height: 270px; background: var(--forest); color: var(--cream); border-color: var(--forest); }
#idoosveny .io-card-back .io-badge { background: #ffffff15; color: #dbe6d2; }
#idoosveny .io-card-back .io-card-year { color: var(--gold); font-size: 52px; }
#idoosveny .io-card-back .io-card-event { font-size: 15px; }
#idoosveny .io-card-back .io-card-bottom { border-color: #ffffff25; color: #bcc9b3; }
#idoosveny .io-card-correct { animation: io-card-settle 2.8s linear both; animation-delay: var(--io-highlight-delay, 0ms); }
@keyframes io-card-settle { 0%, 71.428571% { border-width: 2px; border-color: #b2d48e; background-color: #57894f; } 100% { border-width: 1px; border-color: #749576; background-color: #385d48; } }
#idoosveny .io-card-wrong { border: 2px solid #f1937a; background: #74493e; }
#idoosveny .io-card-correct .io-card-bottom { animation: io-card-label-settle 2.8s linear both; animation-delay: var(--io-highlight-delay, 0ms); }
@keyframes io-card-label-settle { 0%, 71.428571% { color: #e7f0ca; } 100% { color: #c3d5bd; } }
#idoosveny .io-card-wrong .io-card-bottom { color: #ffccb8; }
#idoosveny .io-card-wrong-settle { animation: io-card-wrong-settle 2.8s linear both; animation-delay: var(--io-highlight-delay, 0ms); }
@keyframes io-card-wrong-settle { 0%, 71.428571% { border-width: 2px; border-color: #f1937a; background-color: #74493e; } 100% { border-width: 1px; border-color: #749576; background-color: #385d48; } }
#idoosveny .io-card-wrong-settle .io-card-bottom { animation: io-card-wrong-label-settle 2.8s linear both; animation-delay: var(--io-highlight-delay, 0ms); }
@keyframes io-card-wrong-label-settle { 0%, 71.428571% { color: #ffccb8; } 100% { color: #c3d5bd; } }
#idoosveny .io-table-zone { min-width: 0; }
#idoosveny .io-table-heading { display: flex; gap: 15px; align-items: center; justify-content: space-between; }
#idoosveny .io-table-heading h2 { font-size: 24px; margin: 0; }
#idoosveny .io-table-heading > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
#idoosveny .io-table-help { font-size: 12px; color: var(--muted); margin: 10px 0 16px; }
#idoosveny .io-timeline { --io-table-card-width: 185px; --io-edge-slot-width: 57px; display: flex; align-items: center; overflow-x: auto; padding: 10px 8px 22px; gap: 0; min-height: 300px; scrollbar-color: #b2c795 #385d48; scrollbar-width: thin; }
#idoosveny .io-timeline::before, #idoosveny .io-timeline::after { content: ""; flex: 0 0 max(0px, calc((100% - var(--io-table-card-width)) / 2 - var(--io-edge-slot-width))); }
#idoosveny .io-timeline-finished { --io-edge-slot-width: 24px; }
#idoosveny .io-slot { position: relative; flex: 0 0 57px; display: grid; place-items: center; min-height: 240px; }
#idoosveny .io-slot::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #91ac82; }
#idoosveny .io-slot button { position: relative; width: 39px; height: 46px; padding: 0; border: 1px dashed #b1c39a; border-radius: 8px; color: var(--gold); background: var(--page); font: 25px Georgia, serif; }
#idoosveny .io-slot button:hover { background: var(--forest); color: var(--cream); border-style: solid; }
#idoosveny .io-slot-empty { flex-basis: 24px; }
#idoosveny .io-feedback { border-radius: 9px; padding: 20px 24px; background: #385d48; border: 1px solid #a1ba8a; }
#idoosveny .io-feedback:empty { display: none; }
#idoosveny .io-feedback.io-feedback-error { background: #644538; border-color: #d8997c; }
#idoosveny .io-feedback h2 { font-size: 25px; margin: 0 0 7px; }
#idoosveny .io-feedback p { font-size: 13px; margin: 0; }
#idoosveny .io-next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 20px; }
#idoosveny .io-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 1450px) { #idoosveny main { padding-left: 70px; padding-right: 70px; } }
@media (max-width: 1000px) { #idoosveny main { padding-top: 40px; } #idoosveny .io-setup { gap: 35px; } #idoosveny h1 { font-size: 39px; } #idoosveny .io-selection { padding: 23px; } #idoosveny .io-sample { padding: 10px; } #idoosveny .io-play-area { gap: 24px; grid-template-columns: 210px minmax(0, 1fr); } #idoosveny .io-stats { gap: 12px; } }
@media (max-width: 760px) { #idoosveny .io-header { min-height: 88px; padding: 18px 22px; } #idoosveny .io-header-note { display: none; } #idoosveny .io-brand { font-size: 26px; } #idoosveny .io-brand small { font-size: 8px; letter-spacing: 1.4px; } #idoosveny main { padding: 32px 20px 40px; } #idoosveny .io-setup { grid-template-columns: 1fr; gap: 30px; } #idoosveny h1 { font-size: 39px; } #idoosveny .io-preview { display: none; } #idoosveny .io-lead { font-size: 15px; } #idoosveny .io-selection { padding: 23px; } #idoosveny .io-footer { padding: 20px; flex-direction: column; gap: 6px; } #idoosveny .io-game-top h1 { font-size: 29px; } #idoosveny .io-game-top .io-button { padding: 10px 13px; } #idoosveny .io-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #idoosveny .io-stats span { font-size: 10px; } #idoosveny .io-stats strong { font-size: 26px; } #idoosveny .io-progress { flex-basis: 100%; max-width: none; } #idoosveny .io-play-area { display: flex; flex-direction: column; gap: 26px; padding: 26px 0; } #idoosveny .io-hand-zone { border: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 100px; column-gap: 17px; align-items: center; } #idoosveny .io-hand-zone > .io-eyebrow { grid-column: 1 / -1; } #idoosveny .io-card-back { min-height: 200px; max-width: 350px; } #idoosveny .io-card-back .io-card-year { font-size: 35px; margin: 10px 0; } #idoosveny .io-card-back .io-card-bottom { padding-top: 9px; margin-top: 14px; } #idoosveny .io-hand-hint { margin: 0; } #idoosveny .io-timeline { --io-table-card-width: 164px; --io-edge-slot-width: 53px; min-height: 270px; } #idoosveny .io-timeline-finished { --io-edge-slot-width: 20px; } #idoosveny .io-card { width: 164px; min-height: 220px; padding: 13px; } #idoosveny .io-card-back { width: 100%; min-height: 200px; } #idoosveny .io-slot { flex-basis: 53px; } #idoosveny .io-slot-empty { flex-basis: 20px; } #idoosveny .io-feedback { padding: 18px; } }
#idoosveny .io-stats .io-lives { display: flex; justify-content: center; gap: 6px; line-height: 1.2; }
#idoosveny .io-stats .io-heart { color: #ff7190; font: 30px/1.2 "Segoe UI Symbol", "Segoe UI", sans-serif; transition: color .2s, opacity .2s; }
#idoosveny .io-stats .io-heart-lost { color: #abc0aa; opacity: .35; }
#idoosveny .io-hand-end { display: grid; place-items: center; min-height: 220px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--forest); color: var(--gold); text-align: center; font: bold 26px Georgia, serif; }
@media (prefers-reduced-motion: reduce) { #idoosveny * { transition: none !important; scroll-behavior: auto !important; } }
#idoosveny .io-leaderboard { max-width: 440px; margin: 42px auto 0; padding: 20px 18px; border-radius: 16px; background: var(--forest); }
#idoosveny .io-leaderboard h2 { text-align: center; font-size: 23px; margin: 0 0 12px; letter-spacing: 0; }
#idoosveny .io-leaderboard h2 > span { font-size: 20px; margin-right: 5px; }
#idoosveny .io-leaderboard-list { list-style: none; padding: 0; margin: 0; }
#idoosveny .io-ranking-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 31px; padding: 3px 10px; border-radius: 6px; font-size: 15px; }
#idoosveny .io-ranking-row:nth-child(odd) { background: #ffffff0d; }
#idoosveny .io-ranking-place { font-weight: 700; text-align: center; }
#idoosveny .io-ranking-name { overflow-wrap: anywhere; }
#idoosveny .io-ranking-score { color: var(--gold); font-size: 16px; }
#idoosveny .io-score-form { background: #2b4a39; padding: 12px; border-radius: 10px; margin-bottom: 14px; }
#idoosveny .io-score-form p { font-size: 14px; text-align: center; margin: 0 0 8px; }
#idoosveny .io-score-fields { display: flex; gap: 8px; }
#idoosveny #io-player-name { min-width: 0; width: 100%; background: #fff; color: #294b39; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; font-size: 16px; }
#idoosveny #io-player-name::placeholder { color: #737373; opacity: 1; }
#idoosveny #io-save-score { flex-shrink: 0; border-radius: 8px; padding: 10px 16px; min-height: 43px; font-size: 15px; background: #b78536; }
#idoosveny #io-save-score:hover:not(:disabled) { background: #a5752e; }
#idoosveny .io-ranking-status { font-size: 13px; text-align: center; color: var(--muted); margin: 10px 0; }
#idoosveny .io-ranking-status:empty { display: none; }
#idoosveny #io-reload-leaderboard { display: block; margin: 10px auto 0; }
#idoosveny #io-open-multiplayer { width: 100%; margin-top: 12px; }
#idoosveny .io-multiplayer-setup { max-width: 670px; margin: 0 auto; background: var(--forest); padding: 32px; border-radius: 16px; border: 1px solid var(--border); }
#idoosveny #io-multiplayer-back { margin-bottom: 28px; }
#idoosveny .io-multiplayer-setup h1 { font-size: 39px; margin-bottom: 18px; }
#idoosveny .io-multiplayer-count { margin: 26px 0; }
#idoosveny .io-multiplayer-count label { display: block; font-weight: 600; margin-bottom: 10px; }
#idoosveny #io-initial-count { width: 105px; margin-bottom: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; background: #f4efdc; color: #294b39; }
#idoosveny .io-multiplayer-players { display: grid; gap: 10px; margin: 16px 0; }
#idoosveny .io-player-input-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 36px; align-items: center; gap: 12px; border-left: 5px solid var(--io-player-color); border-radius: 8px; padding: 9px 8px 9px 12px; background: #ffffff09; }
#idoosveny .io-player-input-row label { color: var(--io-player-color); font-size: 13px; font-weight: 600; }
#idoosveny .io-player-input-row input { min-width: 0; width: 100%; padding: 9px 12px; border-radius: 7px; border: 1px solid transparent; color: #294b39; background: #f4efdc; }
#idoosveny .io-remove-player { border: 0; border-radius: 6px; background: #ffffff10; color: var(--cream); font-size: 24px; width: 36px; height: 38px; }
#idoosveny .io-multiplayer-rule { color: var(--muted); font-size: 13px; margin: 22px 0; }
#idoosveny #io-start-multiplayer { width: 100%; margin-top: 10px; justify-content: space-between; }
#idoosveny .io-turn { padding: 14px 18px; margin-bottom: 16px; border-radius: 10px; background: #00000020; border-left: 5px solid var(--io-player-color); color: var(--io-player-color); font: bold 24px/1.3 Georgia, serif; overflow-wrap: anywhere; }
#idoosveny .io-roster { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
#idoosveny .io-player-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #00000015; border: 1px solid transparent; border-left: 4px solid var(--io-player-color); border-radius: 7px; max-width: 100%; }
#idoosveny .io-player-status strong { color: var(--io-player-color); font-size: 13px; overflow-wrap: anywhere; }
#idoosveny .io-player-current { border-color: var(--io-player-color); background: #00000025; }
#idoosveny .io-roster-hearts { display: flex; gap: 3px; color: #ff7190; font-size: 18px; }
#idoosveny .io-roster-heart-lost { opacity: .25; }
#idoosveny .io-player-out { opacity: .5; }
#idoosveny .io-player-out-label { font-size: 11px; }
#idoosveny .io-discard-card { border: 1px solid var(--gold); border-radius: 7px; margin-top: 14px; padding: 9px 12px; background: #b78536; color: #fff8e9; font-weight: 600; }
#idoosveny .io-discard-card:hover { background: #a5752e; }
#idoosveny[data-mode="multi"] .io-stats { margin-bottom: 12px; }
#idoosveny[data-mode="multi"] .io-hand-end, #idoosveny[data-mode="multi"] .io-feedback { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 760px) { #idoosveny .io-multiplayer-setup { padding: 22px 18px; } #idoosveny .io-multiplayer-setup h1 { font-size: 32px; } #idoosveny .io-player-input-row { grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; } #idoosveny .io-player-input-row label { grid-column: 1 / -1; } #idoosveny .io-turn { font-size: 21px; } }

/* Az 1004.hu oldal arculatához igazítva: címsorok Lora betűvel, vissza a Vezetői Központba */
#idoosveny h1, #idoosveny h2, #idoosveny .io-brand { font-family: 'Lora', Georgia, serif; }
#idoosveny .io-back { color: var(--ink); opacity: .85; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; }
#idoosveny .io-back:hover { opacity: 1; border-color: var(--gold); color: var(--gold); }
@media (max-width: 760px) { #idoosveny .io-back { font-size: 12px; padding: 6px 10px; } }