*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f1f7ee;color:#1f2d1f;line-height:1.5;-webkit-text-size-adjust:100%}
.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.75rem 1rem;padding-top:max(.75rem, env(safe-area-inset-top));padding-left:max(1rem, env(safe-area-inset-left));padding-right:max(1rem, env(safe-area-inset-right));background:#2e7d32;color:#fff}
.topbar a,.topbar .link{color:#fff;text-decoration:none;margin-left:1rem;background:none;border:0;font:inherit;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;touch-action:manipulation}
.topbar nav{display:flex;align-items:center;flex-wrap:wrap}
.topbar nav form{display:inline;margin:0}
.brand{font-weight:700;font-size:1.2rem;margin-left:0!important}
.container{max-width:960px;margin:0 auto;padding:1rem;padding-bottom:max(2rem, env(safe-area-inset-bottom));padding-left:max(1rem, env(safe-area-inset-left));padding-right:max(1rem, env(safe-area-inset-right))}
.card{background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.card.narrow{max-width:460px;margin:1rem auto}
label{display:block;margin:.75rem 0;font-weight:600}
input,select{display:block;width:100%;margin-top:.25rem;padding:.75rem .85rem;font-size:16px;border:1px solid #b6c9b3;border-radius:8px;min-height:46px;background-color:#fff}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;background-size:16px;padding-right:2.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.75rem 1.25rem;font-size:1rem;min-height:46px;background:#2e7d32;color:#fff;border:0;border-radius:10px;text-decoration:none;cursor:pointer;font-weight:600;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.btn.secondary{background:#6a8f6c}
.btn.btn-danger{background:#c62828}
.btn.btn-success{background:#2e7d32}
.btn.btn-found{background:#e65100;font-size:1.2rem;box-shadow:0 3px 8px rgba(230,81,0,.35);min-height:54px;font-weight:700}
.btn.btn-found:hover{background:#bf360c}
.btn.btn-large{font-size:1.15rem;padding:1rem 1.8rem;min-height:52px}
.btn.btn-sm{font-size:.9rem;padding:.4rem .85rem;min-height:38px}
.btn-icon{background:none;border:none;color:#b3261e;font-size:1.35rem;cursor:pointer;padding:.4rem;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;touch-action:manipulation}
.btn-icon:hover{background:#fee}
.error{color:#b3261e;margin:.25rem 0}
.hint{color:#556b55;font-size:.95rem}
.lead{font-size:1.1rem;color:#334d33;margin:.5rem 0 1.25rem}
.subtitle{color:#666;font-size:.9rem;margin-top:.25rem}

/* Flash alerts */
.alert{padding:.85rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:1rem}
.alert-success{background:#e8f5e9;border:1px solid #a5d6a7;color:#1b5e20}
.alert-error{background:#ffebee;border:1px solid #ffcdd2;color:#b71c1c}
.alert-info{background:#e3f2fd;border:1px solid #90caf9;color:#0d47a1}

/* Badges */
.badge{display:inline-block;padding:.3rem .65rem;border-radius:999px;font-size:.85rem;font-weight:600}
.badge-info{background:#e8f5e9;color:#2e7d32}
.badge-success{background:#d4edda;color:#155724}
.badge-warning{background:#fff3cd;color:#856404}
.badge-secondary{background:#eceff1;color:#455a64}
.badge-youngest{background:#fff3cd;color:#856404;font-size:.8rem;padding:.2rem .5rem;border-radius:999px;font-weight:600;white-space:nowrap}
.badge-fire{background:#ffebee;color:#c62828;font-size:.8rem;padding:.2rem .5rem;border-radius:999px;font-weight:700}
.badge-sm{font-size:.75rem;padding:.15rem .45rem}

.header-with-badge{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
.header-with-badge h1{margin:0}

/* Form sections */
.form-section{border:1px solid #d5e4d2;border-radius:10px;padding:1.25rem;margin:1.25rem 0;background:#fafdf9}
.form-section legend{font-weight:700;font-size:1.1rem;padding:0 .5rem;color:#2e7d32}
.form-group{margin:.75rem 0}

/* Players input list */
.players-table{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem}
.player-row{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#fff;border:1px solid #e1ebe0;border-radius:8px}
.player-radio-col{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.radio-label{display:flex;align-items:center;gap:.35rem;cursor:pointer;margin:0;font-weight:normal}
.radio-label input[type="radio"]{width:auto;margin:0;cursor:pointer}
.player-input-col{flex:1 1 auto}
.player-input-col input{margin-top:0}
.player-action-col{flex:0 0 auto}

/* End rules grid */
.end-rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:.5rem}
.rule-card{border:2px solid #d5e4d2;border-radius:10px;padding:1rem;background:#fff;transition:border-color .2s,box-shadow .2s}
.rule-card.selected{border-color:#2e7d32;background:#f3faf1;box-shadow:0 0 0 1px #2e7d32}
.rule-header{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;margin:0}
.rule-header input[type="radio"]{width:auto;margin-top:.25rem;cursor:pointer;flex-shrink:0}
.rule-description{margin:.35rem 0 0;font-weight:normal;font-size:.9rem;color:#556b55}
.rule-details{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed #d5e4d2}

/* Active game page styling */
.rule-summary-banner{display:flex;align-items:center;gap:.75rem;background:#eef7ed;border-left:4px solid #2e7d32;border-radius:8px;padding:.85rem 1rem;margin:1rem 0}
.rule-summary-banner p{margin:.2rem 0 0;color:#284e27}
.rule-icon{font-size:1.8rem;line-height:1}

/* Player selector bar */
.player-selector-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;background:#f8fbf7;border:1px solid #d6e5d3;border-radius:10px;padding:.75rem 1rem;margin:1rem 0}
.selector-label{font-size:.9rem;font-weight:600;color:#456343}
.player-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.player-pill{background:#fff;border:1px solid #b6c9b3;border-radius:999px;padding:.5rem 1rem;min-height:44px;font-size:.95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:all .2s;color:#1f2d1f;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.player-pill:hover{background:#e8f5e9;border-color:#2e7d32}
.player-pill.active{background:#2e7d32;color:#fff;border-color:#2e7d32;font-weight:700}
.player-pill.active .pill-badge{filter:brightness(1.1)}
.pill-check{font-size:.9rem}
.pill-badge{font-size:.85rem}

/* Action Boxes */
.action-box{border-radius:12px;padding:1.5rem;margin:1.5rem 0;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.setup-hide-box{background:#f1f8e9;border:2px solid #aed581}
.action-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.action-header h2{margin:0 0 .25rem;font-size:1.4rem;color:#2e7d32}
.action-header p{margin:0;color:#33691e}
.action-icon{font-size:2.5rem;line-height:1}

/* Figure Selector */
.figure-selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:.5rem}
.figure-card{border:2px solid #c5e1a5;border-radius:10px;padding:1rem;background:#fff;cursor:pointer;transition:all .2s;display:block}
.figure-card:hover{border-color:#7cb342;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.figure-card.selected{border-color:#2e7d32;background:#f9fdf8;box-shadow:0 0 0 2px #2e7d32}
.figure-card input[type="radio"]{display:none}
.figure-card-content{display:flex;gap:1rem;align-items:flex-start}
.figure-emoji{font-size:2.5rem;line-height:1}
.figure-text{flex:1}
.figure-text strong{display:block;font-size:1.1rem;color:#1f2d1f}
.figure-multiplier{display:inline-block;margin-top:.25rem;font-size:.85rem;color:#2e7d32;font-weight:700}
.figure-desc{margin:.4rem 0 0;font-size:.85rem;color:#616161}

/* Active Hide Box */
.active-hide-box{background:#fff8e1;border:2px solid #ffe082}
.active-hide-banner{display:flex;align-items:center;gap:1.25rem}
.hider-badge-col{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.hider-avatar{font-size:3rem;line-height:1}
.hider-details-col h2{margin:0 0 .25rem;font-size:1.4rem;color:#e65100}
.figure-tag{margin:.25rem 0;font-size:1rem}
.hidden-since{margin:.25rem 0 0;color:#6d4c41;font-size:.9rem}

/* Timer Display Box */
.timer-display-box{margin:1.25rem 0;background:#fff;border:2px dashed #ffb74d;border-radius:10px;padding:1.25rem;text-align:center}
.timer-label{font-size:.8rem;text-transform:uppercase;color:#e65100;letter-spacing:1px;font-weight:700}
.timer-values{font-size:2rem;font-weight:800;color:#bf360c;font-variant-numeric:tabular-nums;margin:.35rem 0}
.timer-score-preview{font-size:.95rem;color:#5d4037}

/* Found Container */
.found-action-container{text-align:center;margin-top:1rem}
.found-form-wrapper{background:#fff;border:2px solid #ff9800;border-radius:12px;padding:1.25rem;text-align:left;box-shadow:0 3px 10px rgba(0,0,0,.1);margin-top:1rem}
.found-form-wrapper h3{margin:0 0 .35rem;color:#e65100}
.found-time-options{display:flex;flex-direction:column;gap:.5rem;margin-top:.35rem}
.radio-option{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:normal;margin:0}
.radio-option input[type="radio"]{width:auto;margin:0}
.found-form-actions{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}

/* Scoreboard */
.scoreboard-section{margin:2rem 0}
.section-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.section-header h2{margin:0;font-size:1.3rem}
.scoreboard-table-wrap{overflow-x:auto;border:1px solid #d5e4d2;border-radius:10px;background:#fff}
.scoreboard-table{width:100%;border-collapse:collapse;font-size:.95rem}
.scoreboard-table th{background:#f1f7ee;padding:.75rem 1rem;text-align:left;font-weight:700;color:#284e27;border-bottom:2px solid #d5e4d2}
.scoreboard-table td{padding:.75rem 1rem;border-bottom:1px solid #eef2ec;vertical-align:middle}
.scoreboard-table tr:last-child td{border-bottom:none}
.row-active-hider{background:#fffde7}
.row-current-player{font-weight:600}
.rank-cell{font-size:1.2rem;text-align:center}
.player-name-cell{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.score-cell{text-align:right}
.score-bold{font-weight:800;font-size:1.05rem;color:#2e7d32;display:block}
.score-sub{font-size:.8rem;color:#6b8668}

.progress-bar-bg{width:100%;background:#e0e0e0;height:6px;border-radius:3px;margin-top:.35rem;overflow:hidden}
.progress-bar-fill{background:#2e7d32;height:100%;border-radius:3px;transition:width .3s}

/* History */
.history-section{margin:1.5rem 0}
.history-section summary{cursor:pointer;padding:.5rem 0;color:#2e7d32}
.history-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.history-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;background:#fafdf9;border:1px solid #e1ebe0;border-radius:8px}
.history-item-icon{font-size:1.5rem;line-height:1}
.history-item-body{flex:1}
.history-meta{font-size:.8rem;color:#757575;margin-top:.15rem}
.history-score-badge{font-weight:700;color:#2e7d32;white-space:nowrap}

.management-section{margin-top:2rem;padding-top:1.25rem;border-top:1px solid #e0e9df}
.management-section summary{cursor:pointer}

/* Rustig dashboard */
.game-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.game-head h1{margin:0}
.player-switch{display:flex;align-items:center;gap:.5rem;margin:0;color:#5f6f5f;font-size:.9rem}
.link-subtle{background:none;border:0;padding:.4rem;color:#8a9a8a;font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;min-height:36px}
.link-subtle:hover{color:#2e7d32}
.tabs{display:flex;gap:.25rem;margin:1rem 0 1.25rem;border-bottom:1px solid #e0e9df;overflow-x:auto}
.tabs a{padding:.65rem .9rem;color:#5f6f5f;text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tabs a.active{color:#2e7d32;border-bottom-color:#2e7d32;font-weight:700}
.rule-line{color:#8a9a8a;font-size:.9rem;margin:0 0 1rem}
.turn-line{margin:.25rem 0 1rem}
.empty-note{color:#8a9a8a;text-align:center;padding:1.5rem 0}
.score-list{list-style:none;margin:.5rem 0 0;padding:0}
.score-list li{display:flex;align-items:center;gap:.75rem;padding:.75rem .25rem;border-bottom:1px solid #eef3ed}
.score-list li.me{background:#f4faf3;border-radius:8px}
.score-list .rank{width:2rem;text-align:center}
.score-list .who{flex:1}
.score-list .score{font-weight:700;color:#2e7d32;white-space:nowrap}
.history-section .history-item{margin-bottom:.5rem}
.past-game{padding:.6rem 0;border-bottom:1px solid #eef3ed}
.past-game summary{display:flex;flex-direction:column;gap:.15rem}
.picker-card{text-align:center}
.timer-score{font-size:2.6rem;font-weight:800;color:#2e7d32;line-height:1.1}
.timer-score small{font-size:1rem;font-weight:600}
.timer-time-sub{color:#8a9a8a;font-size:.85rem;margin-top:.25rem}
.score-list small{color:#8a9a8a;font-weight:400}
.picker-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.picker-list form{margin:0}
.picker-btn{width:100%;min-height:60px;font-size:1.2rem;font-weight:600;background:#f4faf3;color:#1f2d1f;border:1px solid #b6c9b3;border-radius:12px;cursor:pointer;touch-action:manipulation}
.picker-btn:hover{background:#2e7d32;color:#fff;border-color:#2e7d32}

/* Winner & Celebration Hero */
.winner-celebration-hero{text-align:center;padding:2rem 1rem 1.5rem;background:linear-gradient(180deg,#fffde7 0%,#fff 100%);border-radius:12px;margin-bottom:1.5rem}
.trophy-bounce{font-size:4rem;line-height:1;margin-bottom:.5rem;animation:trophyBounce 1.5s ease infinite alternate}
@keyframes trophyBounce{0%{transform:scale(1) rotate(-3deg)}100%{transform:scale(1.1) rotate(3deg)}}
.badge-large{font-size:1rem;padding:.4rem 1rem}
.winner-title{font-size:2.2rem;margin:.75rem 0 .25rem;color:#2e7d32;font-weight:800}
.winner-subtitle{font-size:1.15rem;color:#4e5d4e;max-width:600px;margin:0 auto}

/* Podium */
.podium-container{display:flex;justify-content:center;align-items:flex-end;gap:.75rem;margin:2rem auto 1.5rem;max-width:480px;min-height:220px;padding:0 .5rem}
.podium-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.step-medal{font-size:2rem;line-height:1}
.step-crown{font-size:1.6rem;line-height:1;margin-bottom:-.3rem}
.step-name{font-size:1.05rem;margin-top:.25rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.step-score{font-size:.85rem;color:#556b55;font-weight:600;margin-bottom:.5rem}
.step-pillar{width:100%;color:#fff;font-weight:800;font-size:1.5rem;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;box-shadow:0 -2px 6px rgba(0,0,0,.08)}
.step-1 .step-pillar{height:130px;background:linear-gradient(180deg,#fbc02d,#f57f17)}
.step-2 .step-pillar{height:95px;background:linear-gradient(180deg,#b0bec5,#78909c)}
.step-3 .step-pillar{height:65px;background:linear-gradient(180deg,#d7ccc8,#8d6e63)}
.row-winner{background:#f9fbe7;font-weight:600}

/* Game summary stats */
.game-summary-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0;padding:1.25rem;background:#f8fbf7;border:1px solid #d6e5d3;border-radius:10px}
.summary-stat{display:flex;align-items:center;gap:.75rem}
.stat-icon{font-size:1.8rem;line-height:1}
.stat-label{display:block;font-size:.8rem;color:#6b8668;text-transform:uppercase;letter-spacing:.5px}

.winner-actions{text-align:center;margin:2.5rem 0 1rem}

/* Live update notice banner */
.live-update-banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;background:#e1f5fe;border:2px solid #0288d1;color:#01579b;font-weight:600;padding:.85rem 1rem;border-radius:10px;margin-bottom:1.25rem;animation:pulseBorder 2s infinite}
@keyframes pulseBorder{0%,100%{box-shadow:0 0 0 0 rgba(2,136,209,.4)}50%{box-shadow:0 0 0 6px rgba(2,136,209,0)}}

/* Responsive adjustments for Tablets & Mobile */
@media (max-width: 768px){
    .container{padding:.75rem}
    .card{padding:1.15rem;border-radius:10px}
    .end-rules-grid{grid-template-columns:1fr}
    .figure-selector-grid{grid-template-columns:1fr}
    .game-summary-box{grid-template-columns:1fr}
    .header-with-badge{flex-direction:column;align-items:flex-start}
    .scoreboard-table-wrap{-webkit-overflow-scrolling:touch}
}

@media (max-width: 520px){
    .container{padding:.5rem}
    .card{padding:.85rem}
    .player-row{flex-wrap:wrap;gap:.5rem}
    .player-radio-col{width:100%;margin-bottom:.25rem}
    .player-input-col{flex:1 1 75%}
    .player-action-col{flex:0 0 auto}
    .turn-highlight-banner{flex-direction:column;align-items:flex-start}
    .active-hide-banner{flex-direction:column;text-align:center}
    .action-header{flex-direction:column;text-align:center}
    .timer-values{font-size:1.6rem}
    .winner-title{font-size:1.75rem}
    .trophy-bounce{font-size:3.2rem}
    .btn.btn-large{width:100%;text-align:center}
    .btn.btn-found{width:100%;font-size:1.15rem;padding:1.1rem 1rem}
    .found-form-actions{flex-direction:column}
    .found-form-actions .btn{width:100%}
    .podium-container{min-height:180px;gap:.4rem}
    .step-name{font-size:.9rem;max-width:85px}
    .step-pillar{font-size:1.2rem}
    .step-1 .step-pillar{height:110px}
    .step-2 .step-pillar{height:80px}
    .step-3 .step-pillar{height:55px}
}