/* Splendor v0.4.0 experience layer: information-first cards, action theatre, chat and audio. */
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,input,select,textarea{font:inherit}
input,select,textarea,option{color-scheme:dark;background-color:#061118!important;color:#f7fbfc!important}
select option{background:#061118!important;color:#f7fbfc!important}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;box-shadow:0 0 0 1000px #061118 inset!important;caret-color:#fff}

/* Landing and lobby */
.landing{position:relative}
.hero{background:radial-gradient(circle at 15% 45%,#d9b45924,transparent 24%),radial-gradient(circle at 85% 20%,#227da72b,transparent 28%),linear-gradient(135deg,#102b39f2,#07141df5 58%,#0c1c27f2)}
.hero::before{content:"";position:absolute;inset:0;opacity:.18;background:repeating-linear-gradient(120deg,transparent 0 28px,#d9bb6b18 29px 30px,transparent 31px 58px);pointer-events:none}
.entry-card{position:relative;overflow:hidden;background:linear-gradient(155deg,#102934f2,#061119f6)}
.entry-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#3fb9d6,#e2bc62,#72d4a0,#ef6570,#677184)}
.entry-card input,.entry-card select,.lobby-controls select,.lobby-chat input{border-color:#3b6170!important;background:#050e14!important;color:#fff!important;caret-color:#f1ce79}
.entry-card input:focus,.entry-card select:focus,.lobby-controls select:focus,.lobby-chat input:focus{border-color:#e4bf68!important;box-shadow:0 0 0 3px #d7aa4a26!important;outline:0}
.lobby{width:min(1040px,calc(100% - 20px));display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,38%);gap:14px;background:radial-gradient(circle at 85% 20%,#2d839827,transparent 34%),linear-gradient(145deg,#102732f5,#061119f5)}
.lobby>.section-head,.lobby>h3,.lobby>.lobby-controls{grid-column:1}
.lobby>.lobby-players{grid-column:1;margin:6px 0}
.lobby>.lobby-chat{grid-column:2;grid-row:1/5}
.lobby-chat{min-width:0;padding:12px;border:1px solid #315665;border-radius:13px;background:#050e14d9;display:flex;flex-direction:column;gap:8px}
.lobby-chat-head,.game-chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#efd18c;font-weight:900}
.chat-list{flex:1;min-height:90px;max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:5px;padding:4px;scrollbar-width:thin}
.chat-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start;padding:5px 7px;border-radius:8px;background:#10222c;color:#e4edef;font-size:11px}
.chat-line.mine{background:#17342e}
.chat-line b{color:#e7c779;white-space:nowrap}.chat-line span{overflow-wrap:anywhere}
.chat-empty{margin:auto;color:#6f8a94;font-size:10px;text-align:center}
.chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.chat-compose input{min-width:0;height:34px;border:1px solid #315665;border-radius:8px;padding:0 9px}.chat-compose button{padding:0 12px}
.chat-emojis{display:flex;gap:4px;flex-wrap:wrap}.chat-emojis button{width:34px;height:30px;border:1px solid #304f5c;border-radius:8px;background:#0b1d26;font-size:16px}.chat-emojis button:hover{border-color:#e2bc65;background:#18303a}

/* Speech bubbles and compact in-game chat. */
.player-panel,.my-identity{position:relative;isolation:isolate}.player-speech{position:absolute;z-index:15;left:8px;right:8px;top:36px;padding:6px 8px;border:1px solid #e4bf67;border-radius:10px 10px 10px 3px;background:#f5e8c8;color:#1c1710;font-weight:900;font-size:11px;box-shadow:0 7px 18px #000b;animation:speech-in .24s ease-out}
.my-identity .player-speech{top:4px;bottom:auto;left:4px;right:4px;max-width:none}
.player-speech.reaction{font-size:23px;text-align:center;padding:5px}
@keyframes speech-in{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
.game-chat{position:fixed;z-index:85;top:6px;right:178px;width:min(300px,40vw);border:1px solid #385a68;border-radius:10px;background:#06131bf4;box-shadow:0 8px 25px #000a;overflow:hidden}
.game-chat-head{height:34px;padding:0 7px;cursor:pointer}.game-chat-head button{border:0;background:transparent;color:#e9c978;font-size:16px}.game-chat-body{padding:7px;border-top:1px solid #294754}.game-chat .chat-list{max-height:150px}.game-chat.collapsed .game-chat-body{display:none}.chat-unread{min-width:18px;height:18px;display:grid;place-items:center;border-radius:99px;background:#dfae4e;color:#141008;font-size:9px}

/* Centered action card, card flight and unmistakable turn announcement. */
.action-overlay{background:#0206088e!important;backdrop-filter:blur(3px)!important;pointer-events:none}
.action-card{position:relative;min-width:0!important;width:min(430px,88vw);padding:16px 20px!important;background:linear-gradient(145deg,#102a36f7,#06131bf8)!important}
.action-card h3{font-size:clamp(21px,3vw,31px)!important}.action-card .action-visual{margin:8px auto!important}.action-card .action-visual .dev-card{--card-w:clamp(118px,14vw,162px)!important;width:var(--card-w)!important;height:calc(var(--card-w)/.68)!important}
.action-card .action-visual .card-cost{grid-template-columns:repeat(2,34px)!important}.action-card .action-visual .cost-chip{width:34px!important;height:34px!important;font-size:18px!important}
.action-card.action-leaving{animation:action-fade .45s ease forwards}@keyframes action-fade{to{opacity:0;transform:scale(.95)}}
.flying-development{position:fixed!important;z-index:210!important;margin:0!important;pointer-events:none!important;transform-origin:center;filter:drop-shadow(0 15px 18px #000c)}
.turn-announcement{position:fixed;z-index:205;inset:0;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,#06141bd9 0,transparent 58%);animation:turn-stage 1.75s ease both}
.turn-announcement-card{min-width:min(430px,82vw);padding:18px 28px;border:2px solid #e7c36d;border-radius:18px;background:linear-gradient(135deg,#112b37f5,#061119f7);box-shadow:0 20px 65px #000e,0 0 45px #e6bd6248;text-align:center}
.turn-announcement-card span{display:block;color:#a6bdc6;font-size:11px;letter-spacing:.12em}.turn-announcement-card strong{display:block;margin:4px 0;color:#fff1bf;font:900 clamp(28px,5vw,48px)/1.1 Georgia,"Noto Serif SC",serif}.turn-announcement-card.my-turn strong{color:#ffe08c;text-shadow:0 0 18px #e9ba54}
@keyframes turn-stage{0%{opacity:0;transform:scale(.82)}18%,74%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}

/* Audio settings */
.audio-button.is-on{border-color:#d7b35e;color:#f3d68e}.audio-panel{position:fixed;z-index:260;top:50px;right:8px;width:min(340px,calc(100vw - 16px));max-height:calc(100dvh - 58px);overflow:auto;padding:13px;border:1px solid #a88443;border-radius:14px;background:linear-gradient(145deg,#102934f8,#050e14fa);box-shadow:0 24px 70px #000e}
.audio-panel-head{display:flex;justify-content:space-between;align-items:center}.audio-panel-head small{display:block;color:#8fa8b1;font-size:8px;letter-spacing:.15em}.audio-panel-head strong{color:#f0d28e}.audio-power,.audio-toggle,.setting-choice,.settings-reset{border:1px solid #395a67;border-radius:8px;background:#081820;color:#dbe9ec;padding:6px 9px}.audio-power.on,.audio-toggle.on,.setting-choice.selected{border-color:#d6af56;background:#6a4b17;color:#fff2c4}.settings-device-hint{color:#78929c;font-size:9px}.settings-group{margin-top:10px;padding-top:9px;border-top:1px solid #274753}.settings-group h3{margin:0 0 7px;color:#e3c271;font-size:11px}.settings-row,.audio-setting>div,.settings-track>span{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px}.setting-segments,.track-options{display:flex;gap:4px;flex-wrap:wrap}.settings-track{display:flex;flex-direction:column;gap:5px;margin:9px 0}.audio-setting input{width:100%;accent-color:#d7ae50}.audio-setting small{display:flex;justify-content:space-between;color:#718a94;font-size:8px}.settings-reset{width:100%;margin-top:10px}

@media(max-width:760px){.lobby{grid-template-columns:1fr}.lobby>.section-head,.lobby>h3,.lobby>.lobby-players,.lobby>.lobby-controls,.lobby>.lobby-chat{grid-column:1;grid-row:auto}.lobby-chat{min-height:210px}.game-chat{right:145px;width:230px}}
@media(orientation:landscape) and (max-height:650px){
  .lobby{height:calc(100dvh - 44px);max-height:none;margin:3px auto;padding:8px;gap:5px;overflow:hidden;grid-template-rows:auto auto minmax(0,1fr) auto}.lobby h3{margin:0;font-size:15px}.lobby-players{min-height:0;margin:0;gap:4px}.lobby-player{min-height:0;padding:4px 7px}.lobby-player .avatar{width:27px;height:27px;font-size:8px}.lobby-controls{min-height:34px}.lobby-chat{min-height:0;padding:7px;gap:4px}.lobby-chat .chat-list{min-height:0;max-height:none}.lobby-chat-head small{font-size:8px}.lobby-chat .chat-compose input{height:30px}.lobby-chat .chat-emojis button{height:27px}
  .game-chat{top:3px;right:143px;width:min(250px,38vw)}.game-chat-head{height:29px;font-size:9px}.game-chat-body{padding:5px}.game-chat .chat-list{max-height:105px}
  .audio-panel{top:38px;right:4px;max-height:calc(100dvh - 42px)}
  .action-overlay{inset:0!important}.action-card{width:min(380px,76vw);padding:10px 14px!important}.action-card .action-visual .dev-card{--card-w:105px!important}.action-card h3{font-size:20px!important;margin:3px 0!important}.action-note{margin:4px 0!important}
  .turn-announcement-card{padding:12px 20px}.turn-announcement-card strong{font-size:30px}
  .player-speech{top:28px;font-size:9px;padding:4px 5px}
}
@media(prefers-reduced-motion:reduce){.turn-announcement,.player-speech{animation:none}.flying-development{display:none!important}}