*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050505;color:#eee;font-family:Arial,"Noto Sans JP",sans-serif}
button{cursor:pointer;font:inherit}.app{max-width:1180px;margin:auto;min-height:100vh}.hidden{display:none!important}
.start{min-height:100vh;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding:8vw;overflow:hidden}
.hero{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.62}.startText{position:relative;text-align:right;z-index:2;text-shadow:0 3px 20px #000}
.brand{letter-spacing:.3em;font-weight:bold}.start h1{font-size:clamp(60px,15vw,130px);line-height:.8;margin:18px 0}.start h1 span{font-weight:200}
.start p{letter-spacing:.2em}.start button,dialog button{padding:15px 25px;border:0;font-weight:900;letter-spacing:.1em}
.game{padding:15px}header{display:flex;justify-content:space-between;border-bottom:1px solid #333;padding-bottom:10px}
header b{font-size:24px}header small{display:block;letter-spacing:.25em;font-size:8px;color:#888}header button{background:none;color:#aaa;border:1px solid #444}
.progress{text-align:center;padding:13px}.progress>b{font-size:28px}.progress span{color:#777;font-size:11px}
.bar{height:3px;background:#222;margin-top:8px}.bar i{display:block;height:100%;width:0;background:#eee;transition:.3s}
.round{display:flex;justify-content:space-between;color:#888;font-size:11px;letter-spacing:.12em;margin-bottom:10px}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start}.play-column{min-width:0}
.table{height:230px;display:flex;justify-content:center;align-items:center;gap:48px;background:radial-gradient(circle,#222,#090909);border:1px solid #222}
.table small,h3{font-size:10px;letter-spacing:.2em;color:#777}.field-wrap,.deck-wrap{text-align:center}.deck-wrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.card{width:86px;height:124px;border-radius:9px;border:2px solid #ddd;background:#f7f7f2;color:#111;box-shadow:0 6px 15px #0008;overflow:hidden}
.pcard{position:relative;font-weight:900}.pcard.red{color:#bf2029}
.pcard .corner{position:absolute;display:flex;flex-direction:column;align-items:center;width:26px;line-height:1;text-align:center}
.pcard .corner.top{left:6px;top:7px}.pcard .corner.bottom{right:6px;bottom:7px;transform:rotate(180deg)}
.pcard .rank{font-size:20px;line-height:1}.pcard .suit-small{font-size:15px;line-height:1;margin-top:2px}
.pcard .mid{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;line-height:1}
.back{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#111,#111 5px,#333 5px,#333 10px);color:white;font-weight:bold;border:4px solid #eee}
.back span{display:grid;place-items:center;width:calc(100% - 10px);height:calc(100% - 10px);border:1px solid #777}
.round2 .pcard{background:#101010;color:#f3f3f3;border-color:#777}.round2 .pcard.red{color:#ff5964}
.round2 .back{background:repeating-linear-gradient(-45deg,#eee,#eee 5px,#999 5px,#999 10px);color:#050505}
.msg{text-align:center;min-height:44px;padding:12px;color:#aaa}.msg.gameover{color:#ff3b3b;font-weight:900;letter-spacing:.05em}.hand{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:126px}
.hand .card{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}.hand .playable{transform:translateY(-5px);box-shadow:0 9px 20px #ffffff22}.hand .card:hover{transform:translateY(-8px)}
.unseen{border:1px solid #2f2f2f;background:#0d0d0d;padding:12px;position:sticky;top:12px}
.unseen h3{margin:0 0 10px}.unseen h3 small{letter-spacing:0;font-weight:normal;margin-left:6px}
.tracker{display:grid;grid-template-columns:repeat(13,minmax(18px,1fr));gap:4px}
.track{min-width:0;height:42px;border:1px solid #3a3a3a;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;line-height:1;background:#141414}
.track .track-suit{font-size:15px}.track .track-rank{font-size:10px;margin-top:2px}.track.red{color:#e34c55}.track.seen{visibility:hidden}
dialog{background:#111;color:#fff;border:1px solid #555;text-align:center;max-width:480px;padding:30px}dialog::backdrop{background:#000d}
.preview{border:1px solid #555;padding:20px;margin:20px}.clearDialog img{width:100%;max-height:220px;object-fit:contain;opacity:.5}.clear104{font-size:90px;font-weight:900;line-height:1}
.clearDialog h2{letter-spacing:.08em}.clearDialog small{display:block;color:#777;letter-spacing:.2em;margin:15px}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}.unseen{position:static}}
@media(max-width:600px){
  .game{padding:8px}
  .table{height:190px;gap:22px}
  .card{width:64px;height:92px}
  .pcard .corner{width:20px}
  .pcard .corner.top{left:4px;top:5px}
  .pcard .corner.bottom{right:4px;bottom:5px}
  .pcard .rank{font-size:15px}
  .pcard .suit-small{font-size:12px}
  .pcard .mid{font-size:29px}

  /* Always keep all five hand cards on one row on smartphones */
  .hand{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    width:100%;
    min-height:auto;
    align-items:start;
  }
  .hand .card{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:0.69;
    min-width:0;
  }
  .hand .pcard .rank{font-size:clamp(11px,3.5vw,15px)}
  .hand .pcard .suit-small{font-size:clamp(9px,3vw,12px)}
  .hand .pcard .mid{font-size:clamp(20px,7vw,29px)}
  .hand .playable{transform:translateY(-3px)}
  .hand .card:hover{transform:none}

  .tracker{grid-template-columns:repeat(13,minmax(14px,1fr));gap:2px}
  .track{height:35px}
  .track .track-suit{font-size:11px}
  .track .track-rank{font-size:8px}

  .start{padding:30px 20px 15vh}
  .hero{object-fit:cover;object-position:25% center}
  .start h1{font-size:65px}
}

.header-actions{display:flex;gap:7px}
.rankingDialog{width:min(760px,94vw);max-width:760px;text-align:left}
.rankingDialog h2{text-align:center;margin-top:0}
.dialog-x{position:absolute;right:10px;top:8px;background:none!important;color:#fff!important;border:0!important;font-size:26px;padding:4px 8px!important}
.ranking-note{text-align:center;color:#888;font-size:12px}
.ranking-wrap{max-height:65vh;overflow:auto;border:1px solid #333}
.ranking-table{width:100%;border-collapse:collapse;font-size:13px}
.ranking-table th,.ranking-table td{padding:9px 8px;border-bottom:1px solid #292929;text-align:center;white-space:nowrap}
.ranking-table th{position:sticky;top:0;background:#151515;color:#aaa;font-size:10px;letter-spacing:.08em}
.ranking-table td:last-child{text-align:left;white-space:normal;max-width:180px;word-break:break-word}
.ranking-table tr:nth-child(-n+3) td{font-weight:900}
.scoreDialog{width:min(430px,92vw)}
.scoreDialog input{width:100%;padding:13px 12px;background:#050505;color:#fff;border:1px solid #555;font-size:16px}
.score-help{color:#999;font-size:12px}
.score-actions{display:flex;gap:8px;margin-top:12px}
.score-actions button{flex:1}
.score-actions button:first-child{background:#222;color:#bbb}
.score-form-msg{min-height:20px;margin-top:10px;color:#ff5b5b;font-size:12px}
@media(max-width:600px){
  .header-actions{gap:4px}
  .header-actions button{padding:7px 6px;font-size:10px}
  .ranking-table{font-size:11px}
  .ranking-table th,.ranking-table td{padding:8px 5px}
}

/* ===== Ver.8 compact layout ===== */
.game{padding:8px 12px 70px}
header{padding-bottom:5px;min-height:34px}
.progress{padding:5px 0 6px}
.progress>b{font-size:24px}
.bar{margin-top:4px}
.round{margin-bottom:5px}
.game-layout{gap:10px}
.table{height:185px;gap:42px;margin-top:0}
.msg{min-height:32px;padding:7px 4px}
.hand-section h3{margin:4px 0 6px}
.hand{min-height:105px;gap:6px}
.unseen{padding:8px}
.unseen h3{margin:0 0 6px}
.track{height:36px}
.card{width:78px;height:112px}

/* BEST100 stays accessible at the upper-right */
.header-actions{
  position:fixed;
  top:10px;
  right:12px;
  z-index:40;
}
#rankingBtn{
  background:#111;
  color:#eee;
  border:1px solid #555;
  padding:8px 12px;
  box-shadow:0 4px 18px #0008;
}

/* RESTART is always at lower-right */
.floating-restart{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:45;
  background:#111;
  color:#ddd;
  border:1px solid #555;
  padding:10px 13px;
  font-size:11px;
  letter-spacing:.08em;
  box-shadow:0 5px 20px #000a;
}
.floating-restart:hover{background:#1b1b1b;color:#fff}

@media(max-width:900px){
  .game{padding-top:6px}
}
@media(max-width:600px){
  .game{padding:5px 6px 62px}
  header{padding-bottom:3px}
  header b{font-size:20px}
  .progress{padding:3px 0 4px}
  .progress>b{font-size:21px}
  .round{margin-bottom:3px}
  .table{height:155px;gap:24px}
  .msg{min-height:28px;padding:5px 2px;font-size:11px}
  .hand-section h3{margin:2px 0 4px}
  .hand{min-height:auto;gap:3px}
  .unseen{padding:6px}
  .unseen h3{margin-bottom:4px}
  .track{height:30px}
  .card{width:58px;height:84px}
  .header-actions{top:6px;right:6px}
  #rankingBtn{padding:6px 8px;font-size:10px}
  .floating-restart{right:8px;bottom:8px;padding:8px 9px;font-size:10px}
}

/* Ver.14 brand image: root-level direct file, no PHP image endpoint */
.hero-brand{
  background-image:url("./brand.jpg?v=14");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}