/* BNI Live — shared styles (player / moderator / projector) */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700;800&display=swap');
:root{ --red:#C00000; --red-dark:#8B0000; --ok:#1a7a3a; --warn:#e0a800; --ink:#23262d; --muted:#8a8f98; --line:#eceef1; }
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:'Sarabun',system-ui,sans-serif;color:var(--ink);background:#f0f2f5;}
.fill{min-height:100dvh;display:flex;flex-direction:column;}
.hd{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:10;}
.hd b{font-size:1.05rem;font-weight:800;}
.hd .sub{font-size:.74rem;opacity:.9;}
.wrap{flex:1;width:100%;max-width:560px;margin:0 auto;padding:14px;}
.card{background:#fff;border-radius:16px;box-shadow:0 2px 14px rgba(0,0,0,.07);padding:16px;margin-bottom:14px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:12px;font-family:inherit;font-weight:700;font-size:.95rem;padding:13px 18px;cursor:pointer;transition:transform .06s,filter .15s;}
.btn:active{transform:scale(.97);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-red{background:var(--red);color:#fff;} .btn-red:hover{filter:brightness(1.06);}
.btn-gray{background:#eef0f3;color:#444;} .btn-ghost{background:transparent;color:var(--red);border:1.5px solid var(--red);}
.btn-ok{background:var(--ok);color:#fff;} .btn-warn{background:var(--warn);color:#3a2c00;}
.btn-block{width:100%;} .btn-lg{padding:16px;font-size:1.05rem;}
.row{display:flex;gap:10px;} .row.wrap{flex-wrap:wrap;} .grow{flex:1;}
.input{width:100%;padding:12px 14px;border:1.5px solid #dfe3e8;border-radius:11px;font-family:inherit;font-size:.96rem;}
.input:focus{outline:none;border-color:var(--red);}
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--red);background:#eee;flex-shrink:0;}
.avatar.lg{width:120px;height:120px;}
.pill{display:inline-block;padding:3px 11px;border-radius:11px;font-size:.74rem;font-weight:700;background:#eef;color:#446;}
.tag{display:inline-block;padding:2px 9px;border-radius:8px;font-size:.72rem;font-weight:700;background:#f1f3f5;color:#555;}
.muted{color:var(--muted);} .center{text-align:center;}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);padding:12px 22px;border-radius:10px;color:#fff;font-weight:700;z-index:9999;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:opacity .3s;}
.toast.ok{background:var(--ok);} .toast.err{background:#cc3300;} .toast.hide{opacity:0;pointer-events:none;}
.overlay{position:fixed;inset:0;background:rgba(20,10,10,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;}
.sheet{background:#fff;border-radius:18px;max-width:440px;width:100%;max-height:88vh;overflow:auto;padding:22px;}
.spin{width:30px;height:30px;border:3px solid #eee;border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite;margin:24px auto;}
@keyframes spin{to{transform:rotate(360deg);}}
.section-hd{font-weight:800;font-size:.92rem;padding:8px 12px;border-radius:10px;color:#fff;margin:14px 0 8px;}
.sh-give{background:linear-gradient(135deg,#2e7d32,#1b5e20);} .sh-want{background:linear-gradient(135deg,#2f75b5,#1f5a91);}
.choice{border:1.5px solid #e2e6ea;border-radius:13px;padding:12px;margin-bottom:10px;transition:border-color .15s,background .15s;}
.choice.on{border-color:var(--red);background:#fff7f6;}
.bignum{font-size:2.6rem;font-weight:800;line-height:1;}
@media(min-width:900px){ .wrap.wide{max-width:1100px;} }