:root { --ink:#504853; --muted:#8b7e8e; --line:rgba(101,80,108,.18); --accent:#9a7899; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); background:linear-gradient(145deg,#fbf7f1,#f7f0f4 52%,#f1eff7); font-family:Georgia,"Times New Roman","Noto Serif SC","Yu Mincho",serif; }
button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } [hidden] { display:none!important; }
.tier-sky { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.tier-sky span { position:absolute; width:38vw; height:38vw; border:1px solid rgba(147,115,150,.13); border-radius:50%; animation:orbit-drift 18s ease-in-out infinite alternate; }
.tier-sky span:first-child { right:-16vw; top:-15vw; box-shadow:0 0 90px rgba(179,175,217,.18) inset; }
.tier-sky span:last-child { left:-20vw; bottom:-22vw; animation-delay:-8s; box-shadow:0 0 100px rgba(218,176,190,.2) inset; }
.tier-nav,.tier-shell,.tier-footer { width:min(1420px,calc(100% - 80px)); margin-inline:auto; }
.tier-nav { display:flex; justify-content:space-between; padding:34px 0; border-bottom:1px solid var(--line); color:#8f8291; font-size:9px; letter-spacing:2.6px; }
.tier-page-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; padding:62px 0 42px; }
.tier-page-heading p,.board-heading p,.unassigned-section header p { margin:0 0 10px; color:#a081a0; font-size:9px; letter-spacing:3.8px; }
.tier-page-heading h1 { margin:0; font-size:clamp(42px,5vw,68px); font-weight:400; }
.tier-page-heading span { display:block; margin-top:13px; color:var(--muted); font-size:13px; }
.tier-admin-actions button,.board-heading button { border:0; border-bottom:1px solid var(--line); background:transparent; padding:9px 0; color:#7f687f; font-size:9px; letter-spacing:2px; }
.board-tabs { display:flex; overflow-x:auto; border-block:1px solid var(--line); scrollbar-width:thin; }
.board-tabs button { flex:0 0 auto; min-height:64px; border:0; border-right:1px solid var(--line); background:rgba(255,255,255,.2); padding:0 28px; color:#8e818f; font-size:11px; }
.board-tabs button span { margin-right:15px; color:#b19fb0; font-size:8px; letter-spacing:1px; }
.board-tabs button[aria-current="page"] { background:rgba(255,255,255,.62); color:#654f68; box-shadow:inset 0 -2px #ad8baa; }
.tier-status { margin:48px 0; padding:70px 20px; border:1px solid var(--line); color:var(--muted); text-align:center; }
.tier-board { padding:48px 0 90px; }
.board-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; padding-bottom:34px; }
.board-heading h2 { margin:0; font-size:clamp(28px,4vw,45px); font-weight:400; }
.board-heading > div > span { display:block; margin-top:10px; color:var(--muted); font-size:13px; }
#board-editor-actions { max-width:650px; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px 22px; }
#board-editor-actions label { color:#8b798e; font-size:8px; letter-spacing:1.5px; }
#board-editor-actions .danger-button,.tier-controls .danger-button { color:#ac747d; }
.tier-sections { display:flex; flex-direction:column; gap:18px; }
.tier-section { display:grid; grid-template-columns:230px 1fr; min-height:230px; border:1px solid var(--line); background:rgba(255,253,251,.58); box-shadow:0 16px 40px rgba(70,55,76,.045); transition:border-color .2s ease; }
.tier-section.drag-target { border-color:rgba(128,92,133,.65); }
.tier-section > header { padding:30px 26px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
.tier-section h3 { margin:0; font-size:24px; font-weight:400; line-height:1.3; }
.tier-section header span { display:block; margin-top:11px; color:var(--muted); font-size:11px; line-height:1.8; }
.tier-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:25px; }
.tier-controls button { padding:5px 0; font-size:8px; letter-spacing:1px; }
.tier-drag-handle,.game-drag-handle { touch-action:none; cursor:grab; }
.tier-dropzone { min-height:228px; display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); align-content:start; gap:18px; padding:24px; transition:background .2s ease; }
.tier-dropzone.drag-over,.tier-dropzone.drag-target { background:rgba(220,204,221,.3); }
.drop-hint,.tier-empty { align-self:center; justify-self:center; margin:auto; color:#b0a4b1; font-size:8px; letter-spacing:2px; }
.tier-game { position:relative; min-width:0; }
.tier-game.drag-before::before { content:""; position:absolute; z-index:3; left:-9px; top:0; bottom:24px; border-left:2px solid rgba(126,91,132,.72); }
.tier-game-cover { aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(100,80,108,.14); background:linear-gradient(145deg,rgba(244,229,235,.7),rgba(232,229,243,.7)); color:#a286a3; box-shadow:0 9px 22px rgba(70,55,76,.07); }
.tier-game-cover img { width:100%; height:100%; object-fit:cover; }
.tier-game p { margin:9px 0 0; overflow:hidden; color:#655b68; font-size:10px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.game-drag-handle,.remove-game,.quick-add-game { position:absolute; border:1px solid rgba(98,77,104,.16); background:rgba(253,249,250,.92); color:#705a74; }
.game-drag-handle { top:5px; left:5px; width:30px; height:30px; font-size:10px; }
.remove-game,.quick-add-game { top:5px; right:5px; width:30px; height:30px; }
.unassigned-section { margin-top:45px; border-top:1px solid var(--line); padding-top:28px; }
.unassigned-section header { display:flex; justify-content:space-between; align-items:center; }
.unassigned-section header span { color:#a99dab; font-size:9px; letter-spacing:1px; }
.unassigned-games { min-height:160px; display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,120px)); gap:20px; padding:22px; border:1px dashed rgba(109,85,116,.22); background:rgba(255,255,255,.2); }
.drag-ghost { position:fixed; z-index:999; left:0; top:0; pointer-events:none; opacity:.72; transform:translate3d(-999px,-999px,0); }
.tier-footer { padding:27px 0 42px; display:flex; justify-content:space-between; border-top:1px solid var(--line); color:#a094a2; font-size:8px; letter-spacing:2.3px; }
@keyframes orbit-drift { to { transform:translate(25px,18px) scale(1.05); } }

@media(max-width:900px){
  .tier-nav,.tier-shell,.tier-footer{width:calc(100% - 44px)}
  .tier-section{grid-template-columns:180px 1fr}.tier-dropzone{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:13px;padding:18px}
}
@media(max-width:640px){
  .tier-nav,.tier-shell,.tier-footer{width:calc(100% - 30px)}
  .tier-nav{padding:25px 0}.tier-page-heading{display:block;padding:42px 0 28px}.tier-page-heading h1{font-size:42px}.tier-admin-actions{margin-top:25px}
  .board-tabs{margin-inline:-15px;padding-left:15px}.board-tabs button{min-height:58px;padding:0 20px}
  .tier-board{padding:34px 0 62px}.board-heading{display:block}.board-heading h2{font-size:30px}#board-editor-actions{justify-content:flex-start;margin-top:24px;gap:7px 17px}
  .tier-section{display:block;min-height:0}.tier-section>header{padding:22px;border-right:0;border-bottom:1px solid var(--line)}.tier-section h3{font-size:21px}.tier-controls{margin-top:18px}.tier-order-button{display:inline-block}
  .tier-dropzone{min-height:150px;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:15px}.tier-game p{font-size:9px}.game-drag-handle,.remove-game,.quick-add-game{width:34px;height:34px}
  .unassigned-section header{display:block}.unassigned-section header span{display:block;margin-top:5px}.unassigned-games{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:15px}
  .tier-footer{padding-bottom:max(30px,env(safe-area-inset-bottom))}
}
@media(max-width:350px){.tier-nav,.tier-shell,.tier-footer{width:calc(100% - 24px)}.tier-dropzone,.unassigned-games{gap:8px;padding:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}