/* 툴리 타워디펜스: 게임 화면은 캔버스 한 장(CRT 효과 포함).
   2026-11-13 사용자 "다른 것처럼 사이트로 돌아가기랑 레이아웃 안에서 놀게 — 레이싱하고 던전처럼":
   예전엔 어두운 방에 캔버스만 있었다 → 레이싱처럼 밝은 툴리 바탕 · 위 머리말(← 툴리 · 게임 바꾸기 · 전체 화면) · 게임 틀 · 아래 단축키 줄.
   휴대폰 가로(낮은 화면)·세로 돌림·전체 화면에서는 머리말과 아래 줄을 숨기고 게임만 꽉 채운다(게임 안 타이틀의 「← 툴리로」로 나간다)
   같은 날 "폰트가 조금 일그러지는 느낌 — 원본 배율 아닌 거야?": 머리말이 높이를 먹어 125% 노트북에서 1:1 이던 게 0.9배로 줄고,
   머리말 높이가 소수(94.8px)라 캔버스가 반 픽셀에 걸쳤다 → 머리말·아래 줄은 정수 높이로 얇게, 틀은 캔버스 그림자로(여백 없음),
   낮은 창(820px 밑)은 아래 단축키 줄을 숨긴다. 배율·위치 맞추기는 game.js resize·snapPos */
@font-face{font-family:TDPixel;src:url('../../../layouts/tooli_2026/fonts/neodgm.woff2') format('woff2');font-display:swap}
@font-face{font-family:TDBody;src:url('../../../layouts/tooli_2026/fonts/PretendardVariable.woff2') format('woff2');font-display:swap}
body.tdx-body{margin:0;color:#293047;font:14px/1.6 TDBody,"Noto Sans KR",system-ui,sans-serif;background-color:#fcfbf5;background-image:repeating-linear-gradient(62deg,transparent 0 43px,#b7e0cf38 43px 70px,transparent 70px 111px),repeating-linear-gradient(-62deg,transparent 0 43px,#ffbeaa3a 43px 70px,transparent 70px 111px)}
.tdx{position:relative;display:flex;flex-direction:column;gap:8px;max-width:1700px;margin:0 auto;padding:10px 16px;box-sizing:border-box;min-height:240px}
.tdx *,.tdx *:before,.tdx *:after{box-sizing:border-box}
/* 머리말(레이싱 .mr-header 와 같은 모양) */
.tdx-head{display:flex;justify-content:space-between;align-items:center;gap:14px;height:48px;flex:none;padding:0 14px;background:#fffefa;border:2px solid #344056;border-radius:11px;box-shadow:3px 3px 0 #344056}
.tdx-home{font:14px TDPixel,monospace;color:#48536b;text-decoration:none;white-space:nowrap;padding:4px 6px;border-radius:6px}
.tdx-home:hover{color:#b72f69;background:#ffe8f1}
.tdx-title{display:flex;align-items:center;gap:10px;margin:0;font:22px/1 TDPixel,monospace;color:#293047;white-space:nowrap}
.tdx-title small{font:11px TDPixel,monospace;background:#efe6ff;color:#6a3fa4;padding:3px 7px;border:1px solid #cdb8f0;border-radius:4px}
.tdx-mark{position:relative;width:22px;height:22px;border:2px solid #344056;border-radius:4px 4px 2px 2px;background:#cdb8f0;box-shadow:inset 0 0 0 3px #7c5cc4}
.tdx-mark:before{content:"";position:absolute;left:5px;top:-7px;width:8px;height:6px;background:#ffd36b;border:2px solid #344056;border-bottom:0}
.tdx-tools{display:flex;align-items:center;gap:8px}
.tdx-who{font-size:12px;color:#657087;white-space:nowrap}
.tdx-btn{display:inline-block;font:12px/1 TDPixel,monospace;color:#293047;background:#ffeaaa;border:1.5px solid #344056;border-radius:7px;padding:7px 11px;box-shadow:2px 2px 0 #29304724;cursor:pointer;text-decoration:none;white-space:nowrap}
.tdx-btn:hover{background:#ffe8f1}
.tdx-btn:active{transform:translate(1px,1px);box-shadow:none}
.tdx-btn:focus-visible,.tdx-home:focus-visible{outline:2px solid #b72f69;outline-offset:3px}
.tdx [hidden]{display:none!important}
/* 게임 칸: 틀은 캔버스 둘레 그림자로(여백·테두리가 높이를 먹지 않게, 테두리를 캔버스 상자에 넣으면 그림이 늘어나므로 그림자로) */
.tdx-frame{display:flex;justify-content:center}
.tdx-stage{width:100%;display:flex;justify-content:center}
.tdx-screen{display:block;flex:none;image-rendering:pixelated;touch-action:none;outline:none;border-radius:0;box-shadow:0 0 0 2px #344056,5px 5px 0 2px #293047;background:#000;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tdx-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;height:20px;flex:none;margin-top:4px;padding:0 3px;font-size:11px;line-height:20px;color:#48536b;overflow:hidden}
.tdx-keys{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.tdx-keys kbd{font:10px/1 monospace;border:1px solid #d8dce2;border-radius:3px;padding:2px 4px;background:#fffefa;color:#293047}
.tdx-keys span{color:#9aa5b7;margin:0 2px}
.tdx-save{display:flex;gap:10px;white-space:nowrap}
.tdx-save a{color:#b72f69;text-decoration:none}
.tdx-save a:hover{text-decoration:underline}
.tdx noscript{color:#b72f69;font:14px/1.6 sans-serif;padding:20px}
/* 좁은 창: 머리말을 작게 */
@media (max-width:1050px){.tdx-title small{display:none}.tdx-keys{font-size:10px}}
/* 낮은 창: 아래 단축키 줄을 숨겨 게임 칸을 키운다(125% 배율 노트북에서 1:1 이 되게) */
@media (max-height:820px){.tdx-foot{display:none}}
@media (max-width:760px){
  .tdx{padding:8px 8px 12px;gap:8px}
  .tdx-head{height:42px;padding:0 10px;gap:8px;border-radius:9px;box-shadow:3px 3px 0 #344056}
  .tdx-home{font-size:12px;padding:3px 4px}
  .tdx-title{font-size:17px;gap:6px}
  .tdx-mark,.tdx-who{display:none}
  .tdx-btn{font-size:10px;padding:5px 7px}
  .tdx-screen{box-shadow:0 0 0 2px #344056,3px 3px 0 2px #293047}
  .tdx-keys{display:none}
  .tdx-foot{justify-content:center}
}
/* 낮은 화면(휴대폰 가로): 게임만 꽉 채운다 — game.js 도 이때는 아래 여백(reserve)을 안 둔다 */
@media (max-height:500px){
  body.tdx-body{background:#0d0b18}
  .tdx{padding:0;gap:0;max-width:none}
  .tdx-head,.tdx-foot{display:none}
  .tdx-screen{box-shadow:none}
}
/* 전체 화면: 머리말·아래 줄을 숨기고 게임 칸을 모니터 크기로 */
.tdx:fullscreen{padding:0;justify-content:center;width:100vw;height:100vh;max-width:none;gap:0;background:#0d0b18}
.tdx:fullscreen .tdx-head,.tdx:fullscreen .tdx-foot{display:none}
.tdx:fullscreen .tdx-screen{box-shadow:none}
/* 휴대폰을 세로로 들었을 때: 게임 칸을 90도 돌려 화면 가득(회전 잠금이어도 가로로 눕혀 할 수 있게) */
html.tdx-rotated,html.tdx-rotated body{overflow:hidden;height:100%;overscroll-behavior:none}
html.tdx-rotated .tdx{position:fixed;inset:0;z-index:2147483000;padding:0;min-height:0;max-width:none;background:#0d0b18}
html.tdx-rotated .tdx-head,html.tdx-rotated .tdx-foot{display:none}
.tdx-screen.tdx-rot{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);border-radius:0;box-shadow:none}