@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700;800;900&display=swap');
:root{--bg:#111214;--text:#f1f1f1;--muted:#c7c7c7;--orange:#d7862a;--orange-deep:#b86d18}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Mono',Inter,system-ui;background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100dvh;position:relative}
body:after{content:"";position:fixed;inset:0;background:url('/assets/hero.jpg') center/cover no-repeat;z-index:0;pointer-events:none}
body:before{content:"";position:fixed;inset:0;background:rgba(8,10,14,.28);z-index:1;pointer-events:none}

.wrap{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:24px 16px}
.admin-login{margin:0 0 10px;text-align:right}
.admin-login-btn{display:inline-block;background:rgba(215,134,42,.92);color:#1a1002 !important;text-decoration:none;font-size:12px;font-weight:800;padding:7px 10px;border-radius:8px;border:1px solid #b86d18;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hero h1{margin:0 0 10px;font-size:clamp(52px,7vw,84px);line-height:1.02;font-weight:900;letter-spacing:.01em}
.hero p{margin:0;color:#ececec;font-size:clamp(22px,2.6vw,34px);font-weight:700;line-height:1.2;max-width:980px}

.board{--cell:clamp(20px,2.9vw,42px);display:grid;grid-template-columns:repeat(20,var(--cell));grid-auto-rows:var(--cell);column-gap:10px;row-gap:10px;margin-top:18px;justify-content:center}
.board.loading{visibility:hidden}
.tile{display:flex;align-items:flex-end;justify-content:flex-start;padding:6px;background:rgba(215,134,42,.74);border:1px solid var(--orange-deep);border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.25);text-decoration:none;overflow:hidden}
.tile span{display:block;width:100%;max-height:100%;font-size:clamp(9px,.95vw,12px);line-height:1.05;font-weight:800;color:#1b1002;text-shadow:0 1px 1px rgba(255,255,255,.25)}
.tile span.label-white{color:#f8f8f8;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.tile span[contenteditable="true"]{outline:none;border-bottom:1px dashed rgba(27,16,2,.35);cursor:text}
.tile span{white-space:pre-wrap}
.tile span.fit-tight{font-size:.9em;line-height:1.02}
.tile span.fit-tighter{font-size:.8em;line-height:1}
.m span{font-size:clamp(11px,1.2vw,15px)}
.l span{font-size:clamp(12px,1.45vw,18px)}

.s{grid-column:span 2;grid-row:span 2}.m{grid-column:span 3;grid-row:span 3}.l{grid-column:span 4;grid-row:span 4}

.t1{grid-column:3 / span 4;grid-row:1 / span 4}
.t2{grid-column:8 / span 3;grid-row:1 / span 3}
.t3{grid-column:11 / span 3;grid-row:1 / span 3}
.t4{grid-column:15 / span 3;grid-row:1 / span 3}
.t5{grid-column:18 / span 3;grid-row:2 / span 3}
.t6{grid-column:7 / span 4;grid-row:4 / span 4}
.t7{grid-column:12 / span 3;grid-row:5 / span 3}
.t8{grid-column:15 / span 3;grid-row:4 / span 3}
.t9{grid-column:2 / span 3;grid-row:6 / span 3}
.t10{grid-column:5 / span 3;grid-row:8 / span 3}
.t11{grid-column:8 / span 3;grid-row:9 / span 3}
.t12{grid-column:11 / span 4;grid-row:8 / span 4}
.t13{grid-column:16 / span 3;grid-row:8 / span 3}
.t14{grid-column:18 / span 3;grid-row:9 / span 3}
.t15{grid-column:3 / span 3;grid-row:10 / span 3}
.t16{grid-column:5 / span 4;grid-row:11 / span 4}
.t17{grid-column:10 / span 3;grid-row:12 / span 3}
.t18{grid-column:13 / span 3;grid-row:13 / span 3}
.t19{grid-column:16 / span 3;grid-row:12 / span 3}
.t20{grid-column:18 / span 3;grid-row:13 / span 3}
.t21{grid-column:1 / span 3;grid-row:12 / span 3;display:none !important}

.footer{margin-top:14px;color:#8f8f8f;font-size:11px}
.layout-tools{margin-top:8px}
.layout-btn{background:rgba(10,10,10,.55);color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer}
.layout-btn.active{background:rgba(215,134,42,.45);border-color:rgba(215,134,42,.9)}
.sync-btn{margin-left:8px}
.save-status{margin:8px 0 0;color:#d9d9d9;font-size:12px}
.save-status.ok{color:#8bf0b6}
.save-status.err{color:#ff9f9f}
.load-error{margin:10px 0 0;color:#ffb3b3;font-size:12px}
.admin-only{display:none}
body.admin-mode .admin-only{display:block}
body.admin-mode .admin-login{display:none}
.board.edit-mode .tile{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.board.edit-mode .tile.dragging{opacity:.85;filter:brightness(1.08)}

@media (max-width:1024px){
  .board{--cell:clamp(22px,4.2vw,38px);grid-template-columns:repeat(18,var(--cell));column-gap:10px;row-gap:10px;margin-top:16px;min-height:72vh}
  .tile span{font-size:clamp(10px,1.35vw,14px)}
  .m span{font-size:clamp(12px,1.9vw,18px)}
  .l span{font-size:clamp(13px,2.2vw,21px)}

  /* Tablet/mobile custom map (applies to iPad too) */
  .t1{grid-column:2 / span 4;grid-row:3 / span 4}
  .t2{grid-column:7 / span 3;grid-row:4 / span 3}
  .t3{grid-column:10 / span 3;grid-row:6 / span 3}
  .t4{grid-column:14 / span 3;grid-row:3 / span 3}
  .t5{grid-column:16 / span 3;grid-row:7 / span 3}
  .t6{grid-column:4 / span 4;grid-row:14 / span 4}
  .t7{grid-column:11 / span 3;grid-row:14 / span 3}
  .t8{grid-column:15 / span 3;grid-row:16 / span 3}
  .t9{grid-column:1 / span 3;grid-row:16 / span 3}
  .t10{grid-column:4 / span 3;grid-row:20 / span 3}
  .t11{grid-column:7 / span 3;grid-row:22 / span 3}
  .t12{grid-column:10 / span 4;grid-row:18 / span 4}
  .t13{grid-column:14 / span 3;grid-row:23 / span 3}
  .t14{grid-column:16 / span 3;grid-row:20 / span 3}
  .t15{grid-column:2 / span 3;grid-row:25 / span 3}
  .t16{grid-column:5 / span 4;grid-row:26 / span 4}
  .t17{grid-column:9 / span 3;grid-row:30 / span 3}
  .t18{grid-column:12 / span 3;grid-row:29 / span 3}
  .t19{grid-column:15 / span 3;grid-row:26 / span 3}
  .t20{grid-column:16 / span 3;grid-row:31 / span 3}
  .t21{grid-column:1 / span 3;grid-row:30 / span 3;display:none !important}
}

@media (max-width:640px){
  .wrap{max-width:none;padding:24px 6px}
  .hero h1{font-size:44px}
  .hero p{font-size:20px;line-height:1.25}
  body:after{background-position:center 18%;background-size:cover}
  .board{--cell:clamp(13px,3.7vw,22px);grid-template-columns:repeat(18,var(--cell));column-gap:7px;row-gap:12px;margin-top:22px;min-height:82vh;padding-top:0}
  .tile{align-items:flex-start;justify-content:flex-start;padding:4px}
  .tile span{font-size:clamp(6px,1.6vw,8px);line-height:1.02;word-break:normal;overflow-wrap:normal;hyphens:none}
  .m span{font-size:clamp(7px,2vw,10px)}
  .l span{font-size:clamp(8px,2.4vw,12px)}

  /* iPhone: keep square cards, but with size tiers for readability */
  .s{grid-column:span 3;grid-row:span 3}
  .m{grid-column:span 4;grid-row:span 4}
  .l{grid-column:span 5;grid-row:span 5}

  /* iPhone-specific map (slightly higher/tighter than iPad) */
  .t1{grid-column:2 / span 4;grid-row:2 / span 4}
  .t2{grid-column:7 / span 3;grid-row:3 / span 3}
  .t3{grid-column:10 / span 3;grid-row:4 / span 3}
  .t4{grid-column:14 / span 3;grid-row:2 / span 3}
  .t5{grid-column:16 / span 3;grid-row:5 / span 3}
  .t6{grid-column:4 / span 4;grid-row:8 / span 4}
  .t7{grid-column:11 / span 3;grid-row:11 / span 3}
  .t8{grid-column:15 / span 3;grid-row:10 / span 3}
  .t9{grid-column:1 / span 3;grid-row:13 / span 3}
  .t10{grid-column:4 / span 3;grid-row:16 / span 3}
  .t11{grid-column:7 / span 3;grid-row:18 / span 3}
  .t12{grid-column:10 / span 4;grid-row:15 / span 4}
  .t13{grid-column:14 / span 3;grid-row:20 / span 3}
  .t14{grid-column:16 / span 3;grid-row:18 / span 3}
  .t15{grid-column:2 / span 3;grid-row:22 / span 3}
  .t16{grid-column:5 / span 4;grid-row:23 / span 4}
  .t17{grid-column:9 / span 3;grid-row:27 / span 3}
  .t18{grid-column:12 / span 3;grid-row:26 / span 3}
  .t19{grid-column:15 / span 3;grid-row:23 / span 3}
  .t20{grid-column:16 / span 3;grid-row:28 / span 3}
  .t21{grid-column:1 / span 3;grid-row:27 / span 3;display:none !important}
}