:root{
  --bg:#0e0f13; --bg2:#15171e; --panel:#1a1d26; --panel2:#212532;
  --line:#2a2f3d; --line2:#363c4d;
  --txt:#e8eaf0; --muted:#9aa1b2; --dim:#6b7280;
  --accent:#5b8cff; --accent2:#3a6df0;
  --good:#37c978; --warn:#f5a524; --bad:#f5544e;
  --radius:12px; --radius-sm:8px;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --card-w:118px;
  --t-grass:#4caf7d;--t-fire:#ff7043;--t-water:#42a5f5;--t-lightning:#ffd23f;
  --t-psychic:#b06ad6;--t-fighting:#d98a48;--t-darkness:#5a6175;--t-metal:#90a4ae;
  --t-dragon:#d4af37;--t-colorless:#b8bdc9;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--txt);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden;
}
button{font-family:inherit;cursor:pointer;color:var(--txt);border:none;background:none}
input,select{font-family:inherit;font-size:14px}

/* ===== topbar ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;background:var(--bg2);border-bottom:1px solid var(--line);
  flex:0 0 auto;z-index:10;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:26px}
.topbar h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.02em}
.sub{margin:0;font-size:11px;color:var(--muted)}
.ghost{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 12px;font-size:13px;transition:.12s}
.ghost:hover{background:var(--panel2);border-color:var(--line2)}
.ghost.danger:hover{border-color:var(--bad);color:var(--bad)}
.primary{background:var(--accent2);border:1px solid var(--accent2);border-radius:var(--radius-sm);padding:7px 12px;font-size:13px;font-weight:600;transition:.12s}
.primary:hover{background:var(--accent)}
#btnHelp{width:34px;height:34px;border-radius:50%;font-weight:700;font-size:15px}

/* ===== layout ===== */
.layout{flex:1 1 auto;display:grid;grid-template-columns:1fr 384px;grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden}
.browser{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--line)}
.deck{display:flex;flex-direction:column;background:var(--bg2);min-width:0;min-height:0;overflow:hidden}

/* ===== toolbar ===== */
.toolbar{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2);flex:0 0 auto;display:flex;flex-direction:column;gap:10px}
.searchwrap{position:relative;display:flex;align-items:center;gap:10px}
#search{
  flex:1;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 14px;color:var(--txt);outline:none;transition:.12s;
}
#search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,140,255,.15)}
.rcount{font-size:12px;color:var(--muted);white-space:nowrap}
.filters{display:flex;flex-direction:column;gap:8px}
.fgroup,.fgroup-row{display:flex;gap:6px;flex-wrap:wrap}
.fgroup-row select{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--txt);padding:6px 8px;outline:none;cursor:pointer;
}
.chip{
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:12.5px;color:var(--muted);transition:.12s;user-select:none;
}
.chip:hover{border-color:var(--line2);color:var(--txt)}
.chip.on{background:var(--accent2);border-color:var(--accent2);color:#fff;font-weight:600}
.chip.type.on{color:#0e0f13;font-weight:700}
.chip[data-dot]::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--dot)}

/* ===== grid ===== */
.grid{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-w),1fr));
  gap:12px;align-content:start;
}
.cardcell{position:relative;cursor:pointer;border-radius:7px;transition:transform .1s}
.cardcell:hover{transform:translateY(-3px)}
.cardcell img{width:100%;display:block;border-radius:6px;background:var(--panel2);aspect-ratio:245/342;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.cardcell .addbtn{
  position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:8px;
  background:rgba(10,14,25,.72);color:#fff;font-size:20px;font-weight:300;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);transition:.12s;opacity:.92;
}
.cardcell:hover .addbtn{opacity:1}
.cardcell .addbtn:hover{background:var(--accent2);border-color:var(--accent);transform:scale(1.12)}
.cardcell .addbtn:active{transform:scale(.95)}
.cardcell .incdeck{
  position:absolute;bottom:5px;left:5px;background:var(--good);color:#05210f;
  font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;
}
.cardcell .badge{
  position:absolute;top:5px;left:5px;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:5px;
  background:rgba(0,0,0,.7);color:#fff;letter-spacing:.03em;
}
.cardcell .badge.ex{background:#c0392b}.cardcell .badge.mega{background:#8e44ad}.cardcell .badge.ace{background:#16a085}

/* ===== deck panel ===== */
.deck-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.deckname{margin:0;flex:1;min-width:0;color:var(--txt);font-size:16px;font-weight:700;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-count .big{font-size:26px;font-weight:800;color:var(--good)}
.deck-count .big.under{color:var(--warn)}.deck-count .big.over{color:var(--bad)}
.deck-count .muted{color:var(--dim);font-size:15px}

.deck-stats{display:flex;gap:6px;padding:0 16px 8px;flex-wrap:wrap}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 9px;font-size:11.5px;color:var(--muted)}
.stat b{color:var(--txt);font-size:13px}
.typebar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:0 16px 8px;background:var(--panel)}
.typebar i{display:block;height:100%}

.deck-warnings{padding:0 16px}
.warn-item{font-size:12px;color:var(--warn);background:rgba(245,165,36,.08);border:1px solid rgba(245,165,36,.25);border-radius:6px;padding:5px 9px;margin-bottom:5px}
.warn-item.ok{color:var(--good);background:rgba(55,201,120,.08);border-color:rgba(55,201,120,.25)}

.deck-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 14px 14px}
.empty-hint{color:var(--dim);text-align:center;margin-top:40px;font-size:13px;line-height:1.8}
.dsection{margin-top:10px}
.dsection h3{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.drow{display:flex;align-items:center;gap:9px;padding:4px 4px;border-radius:7px;transition:.1s}
.drow:hover{background:var(--panel)}
.drow .thumb{width:34px;height:47px;border-radius:4px;object-fit:cover;background:var(--panel2);cursor:pointer;flex:0 0 auto}
.drow .nm{flex:1;min-width:0;overflow:hidden}
.drow .nm .t{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .nm .s{font-size:10.5px;color:var(--dim)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.qty{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.qty button{width:23px;height:23px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.qty button:hover{background:var(--line2)}
.qty .n{width:20px;text-align:center;font-weight:700;font-size:13px}
.qty .n.over{color:var(--bad)}

.deck-actions{flex:0 0 auto;padding:12px 16px 14px;border-top:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;gap:12px}
.act-block{display:flex;flex-direction:column;gap:7px}
.act-label{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.deck-actions .row{display:flex;gap:8px}
/* unified control sizing so the button row is even */
.deck-actions select,
.deck-actions .row button{height:38px;border-radius:var(--radius-sm);font-size:13px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.deck-actions select{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:0 8px;outline:none;cursor:pointer}
.deck-actions .row button.grow{flex:1}
.deck-actions .row button.icon{flex:0 0 auto;width:38px;padding:0;font-size:15px}
.deck-actions .act-mini button{flex:1;padding:0;font-size:12.5px}

/* ===== modal ===== */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.modal-body{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:var(--shadow);max-width:760px;width:92%;max-height:90vh;overflow:auto;padding:22px}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;background:var(--panel2);font-size:15px;z-index:2}
.modal-close:hover{background:var(--bad)}
.modal-grid{display:grid;grid-template-columns:300px 1fr;gap:22px}
.modal-img{width:100%;border-radius:10px;box-shadow:var(--shadow);background:var(--panel2)}
.modal-info h2{margin:0 0 2px;font-size:20px}
.modal-info .meta{color:var(--muted);font-size:12.5px;margin-bottom:12px}
.statline{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.statline .s{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:12px}
.statline .s b{color:var(--txt)}
.move{border-top:1px solid var(--line);padding:10px 0}
.move .mh{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.move .mn{font-weight:700;font-size:14px}
.move .cost{font-size:12px;color:var(--accent);font-weight:700}
.move .dmg{margin-left:auto;font-weight:800;font-size:16px}
.move .eff{font-size:12.5px;color:var(--muted);line-height:1.6}
.modal-addbar{margin-top:16px;display:flex;gap:8px;align-items:center}
.help-body{max-width:560px}
.help-body h2{margin-top:0}
.help-body ul{padding-left:20px;line-height:2}
.help-body li b{color:var(--accent)}

/* save-name modal */
.save-modal-body{max-width:420px;width:90%;padding:24px}
.save-modal-body h2{margin:0 0 6px;font-size:18px}
.save-sub{font-size:12.5px;margin:0 0 16px;line-height:1.6}
#saveNameInput{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--txt);font-size:15px;padding:11px 13px;outline:none;transition:.12s}
#saveNameInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,140,255,.15)}
.save-note{font-size:12px;min-height:18px;margin:8px 2px 0;color:var(--warn)}
.save-modal-actions{display:flex;gap:10px;margin-top:18px}
.save-modal-actions button{flex:1;height:42px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* ===== toast ===== */
.ptcg-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);box-shadow:var(--shadow);padding:11px 20px;border-radius:999px;font-size:13.5px;z-index:200;transition:opacity .2s,transform .2s}
.ptcg-toast.hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px)}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#454c60}

/* ===== responsive ===== */
@media(max-width:920px){
  .layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,46vh)}
  .deck{border-top:1px solid var(--line)}
  .browser{border-right:none}
  .modal-grid{grid-template-columns:1fr}
  .modal-img{max-width:260px;margin:0 auto}
}
:root{ }
@media(max-width:560px){ :root{--card-w:96px} .topbar h1{font-size:14px} }