*{box-sizing:border-box}
body{margin:0;background:#f2efe6;color:#3c4340;font-family:Karla,"Helvetica Neue",Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#5f7c96;text-decoration:none}
a:hover{color:#3c4340}
input,button{font-family:inherit;font-size:inherit}
input:focus{outline:none}

@keyframes om-pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes om-shake{0%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}100%{transform:rotate(-7deg)}}
@keyframes om-conf{0%{transform:translateY(-12vh) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(720deg);opacity:.9}}
@keyframes om-rise{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ===== Screens ===== */
.screen{display:none}
.screen.active{display:flex}
#setup-screen{min-height:100vh;align-items:center;justify-content:center;padding:40px 44px}
#game-screen{min-height:100vh;padding:26px 30px;justify-content:center}
#win-screen{position:relative;min-height:100vh;align-items:center;justify-content:center;padding:44px;overflow:hidden}

/* ===== Setup screen ===== */
.setup-shell{width:100%;max-width:1200px;display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);gap:28px;align-items:stretch}

.intro-panel{background:#8fa68e;border-radius:26px;padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;color:#f7f6ef}
.eyebrow{font:600 11px Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#a5a79e}
.eyebrow-light{opacity:.75;color:inherit}
.intro-title{margin:14px 0 10px;font:700 46px/1.05 Quicksand,sans-serif;letter-spacing:-.01em}
.intro-desc{margin:0;max-width:34ch;font:400 15px/1.65 Karla,sans-serif;opacity:.9}
.intro-rules{display:flex;flex-direction:column;gap:12px;margin:34px 0}
.intro-rule{display:flex;align-items:center;gap:14px;background:rgba(255,253,249,.16);border-radius:14px;padding:12px 16px;font:500 13.5px/1.4 Karla,sans-serif}
.intro-rule-icon{width:30px;height:30px;border-radius:9px;background:#f2efe6;display:flex;align-items:center;justify-content:center;font:700 14px Quicksand,sans-serif;flex:none}
.intro-footnote{font:500 12px Karla,sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

.form-panel{background:#fffdf9;border-radius:26px;padding:38px 40px;box-shadow:0 16px 40px rgba(60,67,64,.07);display:flex;flex-direction:column;gap:26px}

.players-form-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:-10px}
.add-player-btn{padding:8px 14px;border-radius:11px;border:1.5px dashed #8fa68e;background:#f2f6f0;color:#5f7a62;font:600 12px Karla,sans-serif;cursor:pointer}
.add-player-btn:hover{border-color:#6f8a72;background:#e2e9de}
.add-player-btn:disabled{opacity:.45;cursor:not-allowed;border-style:solid;border-color:#e6e1d3;background:#f7f5ee;color:#9a9c93}

.players-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.player-form-col{display:flex;flex-direction:column;gap:10px}
.player-form-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.remove-player-btn{width:20px;height:20px;border-radius:50%;border:1.5px solid #e6e1d3;background:#fffdf9;color:#a5a79e;font:700 11px Karla,sans-serif;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.remove-player-btn:hover{border-color:#c08776;color:#c08776}
.field-label{font:600 11px Karla,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a9c93}
.name-input{width:100%;padding:13px 15px;border-radius:13px;border:1.5px solid #e6e1d3;background:#f7f5ee;font:600 15px Karla,sans-serif;color:#3c4340}
.name-input:focus{border-color:#8fa68e}

.swatch-row{display:flex;gap:7px;flex-wrap:wrap}
.swatch-btn{position:relative;width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;padding:0}
.swatch-ring{position:absolute;inset:-4px;border-radius:12px;border:2px solid #3c4340;opacity:.55;pointer-events:none}

.shape-row{display:flex;gap:7px;margin-top:2px;flex-wrap:wrap}
.shape-btn{width:34px;height:34px;border-radius:11px;cursor:pointer;border:1.5px solid #e6e1d3;background:#fffdf9;display:flex;align-items:center;justify-content:center;padding:0}
.shape-btn.selected{border-color:#3c4340;background:#f2efe6}
.shape-glyph-letter{display:block;width:16px;height:16px}
.shape-glyph-photo{display:block;width:20px;height:20px;border-radius:50%;background-size:cover;background-position:center}

.photo-label{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:7px 12px;border-radius:11px;border:1.5px dashed #ddd7c6;color:#9a9c93;font:600 11.5px Karla,sans-serif;cursor:pointer}
.photo-label:hover{border-color:#8fa68e;color:#6f8a72}

.divider{height:1px;background:#eeeadd}

.level-block{display:flex;flex-direction:column;gap:10px}
.level-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.adult-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
.adult-toggle input{position:absolute;opacity:0;width:0;height:0}
.adult-toggle-track{position:relative;width:36px;height:20px;border-radius:99px;background:#e6e1d3;transition:background .18s ease;flex:none}
.adult-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fffdf9;box-shadow:0 1px 3px rgba(60,67,64,.35);transition:transform .18s ease}
.adult-toggle input:checked + .adult-toggle-track{background:#c08776}
.adult-toggle input:checked + .adult-toggle-track .adult-toggle-thumb{transform:translateX(16px)}
.adult-toggle-label{font:600 12px Karla,sans-serif;color:#8e9089}
.adult-toggle-hint{margin:0;font:400 11.5px/1.5 Karla,sans-serif;color:#a5a79e}

.level-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.level-tile{position:relative;text-align:left;padding:14px 16px;border-radius:16px;border:1.5px solid #e6e1d3;background:#f7f5ee;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.level-tile-ring{position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:.16}
.level-tile-title{position:relative;font:700 15px Quicksand,sans-serif;color:#3c4340}
.level-tile-desc{position:relative;font:400 12px/1.4 Karla,sans-serif;color:#8e9089}

.start-btn{margin-top:auto;width:100%;padding:17px;border:none;border-radius:16px;background:#6f8a72;color:#fbfaf4;font:700 16px Quicksand,sans-serif;letter-spacing:.01em;cursor:pointer}
.start-btn:hover{background:#5f7a62}

/* ===== Game shell / layout variants ===== */
.shell{width:100%;max-width:1400px}
.shell.variant-split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);grid-template-rows:auto 1fr;gap:22px;align-items:start}
.shell.variant-split .board-area{grid-column:1;grid-row:1 / span 2;display:flex;justify-content:center;max-width:min(100%, calc(100vh - 52px))}
.shell.variant-split .players-area{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:14px}
.shell.variant-split .control-area{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:14px}
.shell.variant-split .control-inner{flex-direction:row;align-items:center;gap:22px}
.shell.variant-split .legend{flex-wrap:wrap;align-items:center;gap:14px;padding:0 6px}

.shell.variant-dual{max-width:1420px;display:grid;grid-template-columns:264px minmax(0,1fr) 292px;gap:20px;align-items:start}
.shell.variant-dual .board-area{display:flex;align-items:flex-start;justify-content:center;order:2;max-width:min(100%, calc(100vh - 52px))}
.shell.variant-dual .players-area{order:1;display:flex;flex-direction:column;gap:14px}
.shell.variant-dual .control-area{order:3;display:flex;flex-direction:column;gap:16px}
.shell.variant-dual .control-inner{flex-direction:column;gap:18px;align-items:stretch}
.shell.variant-dual .legend{flex-wrap:wrap;align-items:center;gap:14px;background:#fffdf9;border-radius:18px;padding:14px 18px;box-shadow:0 10px 26px rgba(60,67,64,.05)}

.shell.variant-focus{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:18px;justify-items:center}
.shell.variant-focus .board-area{order:2;width:100%;max-width:min(600px, calc(100vh - 250px));display:flex;justify-content:center}
.shell.variant-focus .players-area{order:1;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.shell.variant-focus .control-area{order:3;width:100%;display:flex;flex-direction:column;gap:12px}
.shell.variant-focus .control-inner{flex-direction:row;align-items:center;gap:24px;padding:18px 24px}
.shell.variant-focus .legend{flex-wrap:wrap;align-items:center;gap:14px;padding:0 6px}

.control-inner{display:flex;background:#fffdf9;border-radius:22px;padding:22px;box-shadow:0 12px 30px rgba(60,67,64,.07)}

/* ===== Board ===== */
.board-frame{position:relative;width:100%;max-width:100%;aspect-ratio:1/1;background:#fffdf9;border-radius:24px;padding:12px;box-shadow:0 14px 36px rgba(60,67,64,.09)}
.board{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);border-radius:14px;overflow:hidden;background:#eae6db}
.cell{position:relative;display:flex;align-items:flex-start;padding:4px;box-shadow:inset 0 0 0 1px rgba(255,253,249,.85)}
.cell-number{position:relative;z-index:2;font:700 10px Quicksand,sans-serif;color:#a5a398}
.cell-tag{position:absolute;bottom:3px;right:4px;z-index:2;font:800 9px Quicksand,sans-serif;letter-spacing:.02em}
.board-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.token{position:absolute;display:flex;align-items:center;justify-content:center;color:#fffdf9;font:700 10px Quicksand,sans-serif;box-shadow:0 3px 9px rgba(60,67,64,.32),inset 0 0 0 1.5px rgba(255,253,249,.75);transition:left .2s ease,top .2s ease;z-index:5;overflow:hidden;background-size:cover;background-position:center}

/* ===== Player cards ===== */
.player-card{background:#fffdf9;border-radius:20px;padding:18px 20px;transition:box-shadow .25s ease}
.player-card-head{display:flex;align-items:center;gap:12px}
.player-avatar{flex:none;display:flex;align-items:center;justify-content:center;color:#fffdf9;font:700 16px Quicksand,sans-serif;overflow:hidden;background-size:cover;background-position:center}
.player-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.player-name{font:700 15px Quicksand,sans-serif;color:#3c4340;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta{font:500 11.5px Karla,sans-serif;color:#9a9c93}
.turn-pill{margin-left:auto;flex:none;padding:5px 11px;border-radius:99px;color:#fffdf9;font:700 10px Karla,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.player-bar-track{margin-top:14px;height:6px;border-radius:99px;background:#eeeadd;overflow:hidden}
.player-bar-fill{height:100%;border-radius:99px;transition:width .25s ease}

/* ===== Dice & control ===== */
.dice-block{display:flex;flex-direction:column;align-items:center;gap:10px}
.dice{width:78px;height:78px;border-radius:20px;background:#f7f5ee;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:12px;gap:3px;box-shadow:inset 0 0 0 1.5px #e6e1d3}
.dice.rolling{animation:om-shake .15s infinite}
.dice .dot{border-radius:50%;width:72%;height:72%;align-self:center;justify-self:center;background:transparent}
.dice .dot.active{background:#6f8a72}
.dice-caption{font:600 11px Karla,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a5a79e}

.control-main{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.turn-banner{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:16px;color:#fffdf9}
.turn-banner-label{font:600 10.5px Karla,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.turn-banner-name{font:700 20px Quicksand,sans-serif}
.roll-btn{width:100%;padding:15px 20px;border:none;border-radius:15px;background:#6f8a72;color:#fbfaf4;font:700 15px Quicksand,sans-serif;cursor:pointer;transition:background .2s ease}
.roll-btn:disabled{background:#cfd4cb;cursor:default}
.status-msg{margin:0;font:500 13px/1.5 Karla,sans-serif;color:#8e9089;min-height:2.6em}

.legend{display:flex}
.legend-item{display:flex;align-items:center;gap:7px;font:500 12px Karla,sans-serif;color:#8e9089}
.legend-item i{width:12px;height:12px;border-radius:4px;display:block}
.variant-tabs{margin-left:auto;display:flex;gap:6px}
.variant-tab{padding:7px 12px;border-radius:10px;cursor:pointer;border:1.5px solid #e6e1d3;background:#fffdf9;color:#9a9c93;font:600 12px Karla,sans-serif}
.variant-tab.active{border-color:#6f8a72;background:#e2e9de;color:#4e6a52}
.quit-btn{padding:8px 14px;border-radius:11px;border:1.5px solid #e6e1d3;background:#fffdf9;color:#8e9089;font:600 12px Karla,sans-serif;cursor:pointer}
.quit-btn:hover{border-color:#c9c3b2;color:#3c4340}

/* ===== Win screen ===== */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.confetti span{position:absolute;top:0}
.win-grid{position:relative;z-index:2;width:100%;max-width:1000px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:26px;align-items:stretch}
.win-main{background:#fffdf9;border-radius:26px;padding:44px 42px;box-shadow:0 16px 40px rgba(60,67,64,.08);display:flex;flex-direction:column;justify-content:center;animation:om-rise .4s ease}
.win-headline{display:flex;align-items:center;gap:16px;margin:18px 0 10px}
.win-avatar{display:flex;align-items:center;justify-content:center;color:#fffdf9;font:700 22px Quicksand,sans-serif;overflow:hidden;background-size:cover;background-position:center;flex:none}
.win-title{margin:0;font:700 42px/1.05 Quicksand,sans-serif;color:#3c4340}
.win-suffix{font:600 22px Quicksand,sans-serif;color:#8fa68e}
.win-desc{margin:6px 0 28px;font:400 15px/1.6 Karla,sans-serif;color:#8e9089;max-width:36ch}
.win-btn{align-self:flex-start;width:auto;padding:16px 30px;border-radius:16px;margin-top:0}
.win-special{background:#c08776;border-radius:26px;padding:38px 34px;display:flex;flex-direction:column;color:#fdf7f4;animation:om-rise .5s ease}
.win-special-for{margin:8px 0 22px;font:700 17px Quicksand,sans-serif}
.win-special-text{margin:0;font:500 19px/1.55 Karla,sans-serif}
.win-special-footnote{margin-top:auto;padding-top:26px;font:400 12.5px/1.5 Karla,sans-serif;opacity:.8}

/* ===== Card modal ===== */
.modal-overlay{display:none;position:fixed;inset:0;z-index:60;background:rgba(60,67,64,.45);align-items:center;justify-content:center;padding:30px}
.modal-overlay.active{display:flex}
.flip-card{width:400px;max-width:100%;height:530px;perspective:1500px;animation:om-pop .3s ease}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,.05,.2,1)}
.flip-inner.flipped{transform:rotateY(180deg)}
.flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:24px;background:#8fa68e;display:flex;align-items:center;justify-content:center;box-shadow:0 22px 50px rgba(60,67,64,.3)}
.flip-back-inner{width:100%;height:100%;border-radius:24px;border:12px solid rgba(255,253,249,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.flip-back-icon{width:56px;height:56px;border-radius:16px;background:rgba(255,253,249,.22);display:flex;align-items:center;justify-content:center;font:700 22px Quicksand,sans-serif;color:#fbfaf4}
.flip-back-title{font:700 18px Quicksand,sans-serif;letter-spacing:.06em;color:#fbfaf4}
.flip-back-sub{font:500 12px Karla,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,250,244,.75)}
.flip-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg);border-radius:24px;background:#fffdf9;padding:30px;display:flex;flex-direction:column;gap:22px;box-shadow:0 22px 50px rgba(60,67,64,.3);border-top:10px solid #8fa68e}
.card-top{display:flex;align-items:center;justify-content:space-between}
.card-badge{padding:7px 14px;border-radius:99px;background:#8fa68e;color:#fffdf9;font:700 11px Karla,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.card-cell-label{font:600 11px Karla,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a5a79e}
.card-text{margin:auto 0;font:500 21px/1.5 Karla,sans-serif;color:#3c4340}
.card-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.card-hint{font:500 12px/1.5 Karla,sans-serif;color:#a5a79e}
.card-actions{display:flex;gap:10px}
.card-skip-btn{flex:1;padding:15px;border-radius:14px;border:1.5px solid #e6e1d3;background:#fffdf9;color:#8e9089;font:600 14px Karla,sans-serif;cursor:pointer}
.card-skip-btn:hover{border-color:#c9c3b2;color:#3c4340}
.card-done-btn{flex:1.4;padding:15px;border:none;border-radius:14px;background:#8fa68e;color:#fffdf9;font:700 14px Quicksand,sans-serif;cursor:pointer}

/* ===== Responsive ===== */
@media (max-width:900px){
  .setup-shell{grid-template-columns:1fr}
  #setup-screen{padding:24px 18px}
  .intro-panel{padding:32px 28px}
  .intro-title{font-size:34px}
  .form-panel{padding:28px 24px}
  .players-form{grid-template-columns:1fr}
  .win-grid{grid-template-columns:1fr}
  #win-screen{padding:24px}
  .win-main,.win-special{padding:30px 26px}
  .win-title{font-size:32px}
}

@media (max-width:860px){
  .shell,.shell.variant-split,.shell.variant-dual,.shell.variant-focus{
    display:flex;flex-direction:column;gap:16px;max-width:100%
  }
  .board-area{order:1;max-width:100% !important;width:100%}
  .players-area{order:2;display:flex !important;flex-direction:column;grid-template-columns:none !important}
  .control-area{order:3}
  .control-inner{flex-direction:column !important;align-items:stretch !important}
  #game-screen{padding:16px}
}

@media (max-width:480px){
  .flip-card{height:480px}
  .card-text{font-size:18px}
  .intro-title{font-size:28px}
}