:root{
--yes:#16a34a;
--yes-bg:#dcfce7;
--yes-text:#14532d;
--no:#dc2626;
--no-bg:#fee2e2;
--no-text:#7f1d1d;
--accent:#2563eb;
--bg:#f4f4f5;
--surface:#ffffff;
--surface-2:#f0f0f1;
--text:#18181b;
--text-2:#52525b;
--text-3:#a1a1aa;
--border:#e4e4e7;
--house:#7c3aed;
--house-bg:#ede9fe;
--house-text:#4c1d95;
}
[data-theme="dark"]{
--yes:#22c55e;
--yes-bg:#14532d;
--yes-text:#dcfce7;
--no:#f87171;
--no-bg:#7f1d1d;
--no-text:#fee2e2;
--accent:#3b82f6;
--bg:#09090b;
--surface:#141414;
--surface-2:#1e1e20;
--text:#fafafa;
--text-2:#a1a1aa;
--text-3:#52525b;
--border:#27272a;
--house:#a78bfa;
--house-bg:#2e1065;
--house-text:#ede9fe;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
font-size:14px;
line-height:1.5;
background:var(--bg);
color:var(--text);
height:100dvh;
display:flex;
flex-direction:column;
transition:background .2s,color .2s;
}
header{
background:var(--surface);
border-bottom:1px solid var(--border);
padding:0 1.25rem;
height:46px;
display:flex;
align-items:center;
justify-content:space-between;
flex-shrink:0;
}
.h-title{font-size:.9rem;font-weight:700;letter-spacing:-.01em;}
.h-title span{font-weight:300;color:var(--text-2);margin-left:6px;font-size:.8rem;}
.header-right{display:flex;align-items:center;gap:.5rem;}
.status-badge{
font-size:.65rem;
font-weight:700;
letter-spacing:.07em;
text-transform:uppercase;
padding:3px 9px;
border-radius:99px;
background:var(--surface-2);
color:var(--text-3);
border:1px solid var(--border);
}
.mode-indicator{
font-size:.6rem;
font-weight:700;
letter-spacing:.07em;
text-transform:uppercase;
padding:2px 7px;
border-radius:99px;
background:var(--house-bg);
color:var(--house-text);
border:1px solid var(--house);
}
/* ── Resource Bar ── */
.resource-bar{
background:var(--surface);
border-bottom:1px solid var(--border);
padding:0 1.25rem;
height:36px;
display:flex;
align-items:center;
gap:1rem;
flex-shrink:0;
overflow-x:auto;
}
.res-item{display:flex;align-items:center;gap:.35rem;white-space:nowrap;}
.res-label{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.res-val{font-size:.8rem;font-weight:700;color:var(--text);}
.res-val.res-house{color:var(--house);}
.res-divider{width:1px;height:18px;background:var(--border);}
/* ── App body ── */
.app-body{display:flex;flex:1;overflow:hidden;}
.side-panel{
width:290px;
flex-shrink:0;
background:var(--surface);
border-right:1px solid var(--border);
display:flex;
flex-direction:column;
overflow:hidden;
}
.panel-toggle{
display:none;
width:100%;
padding:7px;
border:none;
border-bottom:1px solid var(--border);
background:var(--surface);
color:var(--accent);
font-size:.72rem;
font-weight:600;
cursor:pointer;
letter-spacing:.03em;
flex-shrink:0;
}
.side-inner{
flex:1;
overflow-y:auto;
padding:.875rem;
display:flex;
flex-direction:column;
gap:1rem;
}
.pool-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.pool-header{
padding:.5rem .875rem;
border-bottom:1px solid var(--border);
background:var(--surface);
display:flex;
align-items:center;
justify-content:space-between;
font-size:.78rem;
color:var(--text-2);
flex-shrink:0;
}
.pool-area{
flex:1;
background:var(--bg);
background-image:radial-gradient(var(--border) 1px,transparent 1px);
background-size:20px 20px;
overflow:auto;
padding:14px;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
gap:8px;
}
.empty-state{width:100%;text-align:center;color:var(--text-3);margin-top:48px;font-size:.85rem;}
.section{padding-top:1rem;border-top:1px solid var(--border);}
.section:first-child{padding-top:0;border-top:none;}
.sec-title{
font-size:.62rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text-3);
margin-bottom:.6rem;
}
.subsec-title{
font-size:.6rem;
font-weight:700;
letter-spacing:.07em;
text-transform:uppercase;
color:var(--text-3);
margin-bottom:.4rem;
}
.switch-row{
display:flex;
gap:3px;
background:var(--surface-2);
padding:3px;
border-radius:6px;
margin-bottom:.5rem;
}
.sw-btn{
flex:1;
padding:4px;
border:none;
border-radius:4px;
background:transparent;
color:var(--text-2);
cursor:pointer;
font-size:.72rem;
font-weight:500;
transition:all .15s;
}
.sw-btn.active{
background:var(--surface);
color:var(--text);
box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.field{margin-bottom:.625rem;}
.field label{display:block;font-size:.72rem;font-weight:500;color:var(--text-2);margin-bottom:3px;}
.field input,.field select{
width:100%;
padding:5px 7px;
border:1px solid var(--border);
border-radius:5px;
font-size:.82rem;
background:var(--surface-2);
color:var(--text);
outline:none;
transition:border-color .15s;
}
.field input:focus,.field select:focus{border-color:var(--accent);}
.field input:disabled{opacity:.4;cursor:not-allowed;}
.field small{display:block;font-size:.68rem;color:var(--text-3);margin-top:2px;}
.btn{
width:100%;
padding:6px 10px;
border:none;
border-radius:5px;
font-size:.78rem;
font-weight:600;
cursor:pointer;
transition:opacity .15s;
}
.btn:hover:not(:disabled){opacity:.85;}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn-accent{background:var(--accent);color:#fff;}
.btn-yes{background:var(--yes);color:#fff;margin-bottom:4px;}
.btn-no{background:var(--no);color:#fff;}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-2);}
.btn-house{background:var(--house);color:#fff;}
.price-row{display:flex;gap:.4rem;margin-bottom:.5rem;}
.price-chip{flex:1;text-align:center;padding:6px 4px;border-radius:5px;}
.price-chip.yes{background:var(--yes);color:#fff;}
.price-chip.no{background:var(--no);color:#fff;}
.chip-label{display:block;font-size:.58rem;opacity:.85;letter-spacing:.06em;}
.chip-val{display:block;font-size:.95rem;font-weight:800;}
.formula-box{
font-family:'Courier New',monospace;
font-size:.7rem;
line-height:1.7;
color:var(--text-2);
background:var(--surface-2);
border:1px solid var(--border);
border-radius:5px;
padding:7px 9px;
margin-bottom:.3rem;
}
.formula-label{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.formula-hint{font-size:.63rem;color:var(--text-3);}
.c-yes{color:var(--yes);}
.c-no{color:var(--no);}
.c-house{color:var(--house);}
.stat-grid{display:grid;gap:.4rem;}
.stat-card{
background:var(--surface-2);
border:1px solid var(--border);
border-radius:5px;
padding:.5rem .625rem;
}
.stat-label{
font-size:.6rem;
font-weight:700;
letter-spacing:.07em;
text-transform:uppercase;
color:var(--text-3);
margin-bottom:3px;
}
.stat-val{font-size:1rem;font-weight:700;color:var(--text);}
.stat-sub{font-size:.67rem;color:var(--text-3);margin-top:2px;}
.kv-row{display:flex;justify-content:space-between;font-size:.75rem;padding:2px 0;}
.kv-row+.kv-row{border-top:1px solid var(--border);}
/* ── Pool members ── */
.member{
width:88px;
height:88px;
border-radius:6px;
padding:6px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
cursor:pointer;
transition:transform .15s,box-shadow .15s;
border:1.5px solid transparent;
font-size:.68rem;
text-align:center;
animation:popIn .25s ease-out;
}
.member:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.member.type-yes{background:var(--yes-bg);border-color:var(--yes);color:var(--yes-text);}
.member.type-no{background:var(--no-bg);border-color:var(--no);color:var(--no-text);}
.member.type-house{background:var(--house-bg);border-color:var(--house);color:var(--house-text);}
.member.is-house{opacity:.7;cursor:default;}
.member-uuid{font-family:'Courier New',monospace;font-weight:700;font-size:.7rem;margin-bottom:2px;}
.member-info{line-height:1.3;}
.member-tag{
font-size:.55rem;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
opacity:.7;
}
/* ── Modals ── */
.modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:none;
justify-content:center;
align-items:center;
z-index:1000;
}
#dialogModal{z-index:2000;}
.modal{
background:var(--surface);
border:1px solid var(--border);
border-radius:10px;
padding:1.375rem;
width:400px;
max-width:92vw;
max-height:85vh;
overflow-y:auto;
box-shadow:0 16px 32px rgba(0,0,0,.15);
color:var(--text);
}
.modal h3{font-size:.95rem;margin-bottom:.625rem;}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.875rem;}
.modal-head h3{margin-bottom:0;}
.modal ul,.modal ol{text-align:left;line-height:1.9;color:var(--text-2);margin:.75rem 0 .75rem 1.25rem;}
.modal li{margin-bottom:.1rem;}
.modal-actions{margin-top:1.125rem;display:flex;gap:.625rem;}
.summary-row{display:flex;justify-content:space-between;font-size:.8rem;padding:5px 0;border-bottom:1px solid var(--border);}
.win-text{font-size:1.05rem;font-weight:700;text-align:center;padding:.625rem 0;}
.input-group{margin-bottom:.875rem;}
.input-group label{display:block;font-size:.78rem;font-weight:600;margin-bottom:4px;}
.input-group input{
width:100%;
padding:7px 9px;
font-size:.95rem;
border:1.5px solid var(--accent);
border-radius:5px;
background:var(--surface-2);
color:var(--text);
outline:none;
}
/* ── Welcome mode cards ── */
.mode-select-row{
display:flex;
gap:.625rem;
margin:.875rem 0;
}
.mode-card{
flex:1;
padding:.75rem .625rem;
border:2px solid var(--border);
border-radius:8px;
background:var(--surface-2);
cursor:pointer;
text-align:center;
transition:all .15s;
font-family:inherit;
color:var(--text);
}
.mode-card:hover{border-color:var(--accent);}
.mode-card.active{
border-color:var(--accent);
background:var(--surface);
box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.mode-card-icon{font-size:1.4rem;margin-bottom:.3rem;}
.mode-card-name{font-size:.82rem;font-weight:700;margin-bottom:.2rem;}
.mode-card-desc{font-size:.68rem;color:var(--text-3);}
/* ── Cheat mode list ── */
.cheat-list{display:flex;flex-direction:column;gap:.375rem;}
.cheat-item{
display:flex;
align-items:flex-start;
gap:.5rem;
padding:.375rem .5rem;
border:1px solid var(--border);
border-radius:5px;
cursor:pointer;
background:var(--surface-2);
transition:background .12s;
}
.cheat-item:hover{background:var(--surface);}
.cheat-item input[type="checkbox"]{
margin-top:2px;
flex-shrink:0;
accent-color:var(--house);
}
.cheat-item span{flex:1;}
.cheat-item strong{display:block;font-size:.75rem;}
.cheat-item small{font-size:.65rem;color:var(--text-3);}
/* ── Phase controls ── */
.phase-note{
font-size:.78rem;
color:var(--text-2);
text-align:center;
padding:.75rem 0;
}
.phase-actions{
display:flex;
gap:.375rem;
margin-top:.625rem;
}
.cost-preview{
font-size:.85rem;
font-weight:600;
color:var(--accent);
padding:4px 7px;
background:var(--surface-2);
border:1px solid var(--border);
border-radius:5px;
}
/* ── Result banner ── */
.result-banner{
font-size:1.1rem;
font-weight:800;
text-align:center;
padding:.75rem 1rem;
border-radius:6px;
margin:.5rem 0 .75rem;
}
.result-banner.user-wins{background:var(--yes-bg);color:var(--yes-text);}
.result-banner.house-wins{background:var(--no-bg);color:var(--no-text);}
.result-banner.neutral{background:var(--surface-2);color:var(--text-2);}
/* ── House turn log ── */
.house-turn-log{
max-height:200px;
overflow-y:auto;
font-size:.75rem;
color:var(--text-2);
background:var(--surface-2);
border:1px solid var(--border);
border-radius:5px;
padding:.5rem .625rem;
margin-bottom:.5rem;
line-height:1.6;
}
.htl-entry{padding:2px 0;border-bottom:1px solid var(--border);}
.htl-entry:last-child{border-bottom:none;}
.htl-add{color:var(--house);}
.htl-buy{color:var(--yes);}
.htl-sell{color:var(--no);}
.htl-pass{color:var(--text-3);}
/* ── Game log textarea ── */
.log-area{
width:100%;
height:320px;
font-family:'Courier New',monospace;
font-size:.7rem;
line-height:1.6;
background:var(--surface-2);
border:1px solid var(--border);
border-radius:5px;
padding:.625rem;
color:var(--text);
resize:vertical;
}
/* ── Game Sell Modal ── */
.sell-target-row{display:flex;gap:.375rem;margin-bottom:.625rem;}
.sell-target-btn{
flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:5px;
background:var(--surface-2);color:var(--text-2);cursor:pointer;font-size:.75rem;
font-weight:600;transition:all .15s;
}
.sell-target-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.sell-fund-preview{
font-size:.8rem;font-weight:600;padding:4px 7px;
background:var(--surface-2);border:1px solid var(--border);border-radius:5px;margin-top:3px;
}
.sell-fund-preview.positive{color:var(--yes);}
.sell-fund-preview.negative{color:var(--no);}
.sell-warning{
font-size:.72rem;color:var(--no);padding:.35rem .5rem;
background:var(--no-bg);border:1px solid var(--no);border-radius:4px;
margin-top:.375rem;display:none;
}
.sell-warning.visible{display:block;}
/* ── House Batch Confirm Panel ── */
.house-confirm-list{display:flex;flex-direction:column;gap:.375rem;max-height:300px;overflow-y:auto;margin-bottom:.75rem;}
.hca-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border:1px solid var(--border);border-radius:5px;background:var(--surface-2);font-size:.75rem;}
.hca-row.approved{border-color:var(--yes);background:var(--yes-bg);}
.hca-row.rejected{opacity:.45;}
.hca-badge{font-size:.6rem;font-weight:700;padding:2px 5px;border-radius:3px;flex-shrink:0;}
.hca-badge.buy{background:var(--yes-bg);color:var(--yes-text);}
.hca-badge.sell{background:var(--no-bg);color:var(--no-text);}
.hca-info{flex:1;color:var(--text);}
.hca-impact{font-size:.68rem;color:var(--text-3);white-space:nowrap;}
.hca-btns{display:flex;gap:3px;flex-shrink:0;}
.hca-btn{width:24px;height:24px;border:1px solid var(--border);border-radius:4px;background:var(--surface);cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;}
.hca-btn:hover{background:var(--surface-2);}
.hca-btn.active-yes{background:var(--yes);color:#fff;border-color:var(--yes);}
.hca-btn.active-no{background:var(--no);color:#fff;border-color:var(--no);}
/* ── Intervention ROI sub-line ── */
.intervention-roi{font-size:.68rem;color:var(--text-3);margin-top:3px;}
/* ── Animations ── */
@keyframes popIn{0%{transform:scale(.8);opacity:0;}100%{transform:scale(1);opacity:1;}}
.hidden{display:none!important;}
/* ── Responsive ── */
@media(max-width:768px){
.app-body{flex-direction:column;}
.side-panel{
width:100%;
border-right:none;
border-top:1px solid var(--border);
max-height:44vh;
order:2;
}
.side-panel.collapsed{max-height:40px;overflow:hidden;}
.pool-wrap{order:1;flex:1;min-height:0;}
.panel-toggle{display:block;}
.resource-bar{height:auto;padding:.375rem 1rem;flex-wrap:wrap;gap:.5rem;}
}
@media(max-width:480px){
.member{width:76px;height:76px;}
.mode-select-row{flex-direction:column;}
}