:root {
  --bg:#fff6ea;
  --bg2:#ffe9cf;
  --board:#3a2a1c;
  --board-edge:#27190f;
  --tile-line:rgba(255,255,255,.12);
  --ink:#3a2a1c;
  --ink-soft:#8a7560;
  --accent:#ff8a3d;
  /* 柴犬オレンジ */
  --accent-deep:#e96f1f;
  --green:#5fb56a;
  --blue:#4aa6e0;
  --pink:#ff6f91;
  --gold:#f6b73c;
  --card:#ffffff;
  --shadow:rgba(120,80,40,.22);
  /*--gap: clamp(4px, 1.4vw, 8px);*/
  --gap: 1px;
  --board-padding: 5px;
  --tile-gap: 1px;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}

html,body {
  height:100%;
}

body {
  /*font-family:"Zen Maru Gothic", system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(130% 90% at 50% -10%, #fffdf8 0%, var(--bg) 45%, var(--bg2) 100%);
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px 28px;
  overflow-x:hidden;*/
}

ruby rt {
  font-size:.55em;
  font-weight:700;
}

/* ---------- 画面共通 ---------- */
.screen {
  width:100%;
  max-width:480px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.screen[hidden] {
  display:none;
}

.screen-title {
  text-align:center;
  font-weight:900;
  font-size:clamp(20px,5.5vw,26px);
  letter-spacing:.02em;
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:34px;
}

.link-btn {
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-family:inherit;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
  transition:.15s;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.link-btn:hover {
  color:var(--accent-deep);
  background:rgba(255,255,255,.6);
}

.link-btn svg {
  width:16px;
  height:16px;
}

.big-btn {
    border-radius: 10vw;
    min-width: 57vw;
    font-size: 6vw;
    box-shadow: -0.2vw 1vw #e37430;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    background: #ed9028;
    color: #fff;
    padding: 3vw 4vw;
    text-align: center;
    cursor: pointer;
    transition: .16s;
}

.big-btn:hover {
  transform:translateY(-2px);
  /*box-shadow:0 16px 26px -10px var(--accent-deep);*/
}

.big-btn.ghost {
  /*background:#fff;
  color:var(--accent-deep);
  box-shadow:0 8px 18px -10px var(--shadow);
  border:2px solid #ffd9b8;*/
}

.big-btn.ghost:hover {
  /*background:#fff7f0;*/
}

/* ---------- イントロ ---------- */
.intro {
  align-items:center;
}

.intro-card {
  width:100%;
  background:var(--card);
  border-radius:28px;
  padding:30px 24px 28px;
  text-align:center;
  box-shadow:0 30px 60px -28px var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.logo {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.logo-mark {
  font-size:54px;
  line-height:1;
  filter:drop-shadow(0 6px 8px rgba(120,80,40,.25));
}

.logo h1 {
  font-weight:900;
  font-size:clamp(24px,7vw,32px);
  line-height:1.25;
  letter-spacing:.02em;
}

.rules {
  list-style:none;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:9px;
  width:100%;
}

.rules li {
  position:relative;
  padding:11px 13px 11px 40px;
  background:#fff7ef;
  border-radius:14px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  line-height:1.5;
}

.rules li::before {
  content:"🐾";
  position:absolute;
  left:12px;
  top:11px;
  font-size:15px;
}

/* ---------- ステージ選択 ---------- */
.level-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.lv-card {
  border:none;
  cursor:pointer;
  border-radius:20px;
  padding:18px 22px;
  color:#fff;
  text-align:left;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  box-shadow:0 14px 26px -14px var(--shadow);
  transition:.16s;
}

.lv-card:hover {
  transform:translateY(-3px);
}

.lv-card .lv-no {
  font-family:"Outfit",sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:.08em;
  background:rgba(255,255,255,.28);
  padding:6px 11px;
  border-radius:999px;
  white-space:nowrap;
}

.lv-card .lv-diff {
  font-weight:900;
  font-size:clamp(19px,5.5vw,23px);
}

.lv-card .lv-grid {
  font-family:"Outfit",sans-serif;
  font-weight:800;
  font-size:20px;
  opacity:.92;
}

.lv1 {
  background:linear-gradient(135deg,#6fd08c,#3fa55e);
}

.lv2 {
  background:linear-gradient(135deg,#54b3ef,#2f86c9);
}

.lv3 {
  background:linear-gradient(135deg,#ff9a52,#ef6f1f);
}

/* ---------- プレイ画面 ---------- */
.level-tag {
  font-family:"Outfit",sans-serif;
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  background:var(--board);
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
}

.speech {
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--card);
  border-radius:18px;
  padding:12px 16px;
  box-shadow:0 10px 22px -14px var(--shadow);
  position:relative;
}

.speech-face {
  font-size:34px;
  line-height:1;
  flex:0 0 auto;
  background:#fff3e3;
  border-radius:50%;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 2px #ffe0bf;
}

.speech-text {
  font-size:14px;
  font-weight:700;
  line-height:1.55;
}

/* ---------- 盤面 ---------- */
.stage {
  position:relative;
  width:min(100%, 70vh);
  aspect-ratio:1/1;
  margin: 0 auto 15px;
}

.board {
  --n:3;
  position:absolute;
  inset:0;
  background:#fff;
  padding:var(--board-padding);
  box-shadow:0 26px 50px -22px rgba(40,25,15,.6), inset 0 1px 0 rgba(255,255,255,.06);
  touch-action:none;
}

.grid {
  position:absolute;
  inset:var(--board-padding);
}

.tile {
  position:absolute;
  top:0;
  left:0;
  width:var(--ts);
  height:var(--ts);
  /*border-radius:11px;*/
  background-repeat:no-repeat;
  cursor:pointer;
  transition:transform .19s cubic-bezier(.34,1.32,.5,1);
  /*box-shadow:inset 0 0 0 1px var(--tile-line), 0 5px 12px -6px rgba(0,0,0,.45);*/
  overflow:hidden;
  will-change:transform;
}

.tile:active {
  transition:transform .08s ease;
}

.tile.movable::after {
  content:"";
  position:absolute;
  inset:0;
  /*border-radius:11px;*/
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0);
  transition:.18s;
}

.board:not(.locked) .tile.movable:hover::after {
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}

/* ---------- コントロール ---------- */
.controls {
  display:flex;
  gap:10px;
}

.controls button {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 21px;
    font-weight: 800;
    font-style: normal;
    padding: 9px 8px;
    flex: 1;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: .16s;
    letter-spacing: 4px;
}
	.controls button.rubi_show{
		padding: 20px 8px 8px 8px;
	}

/*.btn-main{background: #eb613b; color:#fff;box-shadow:0 12px 22px -12px var(--accent-deep);}*/
.btn-main {
  background: #eb613b;
  color: #fff;
  box-shadow: 2px 3px 7px 0px #393939;
}

.btn-main:hover {
  transform:translateY(-2px);
  /*box-shadow:0 16px 26px -12px var(--accent-deep);*/
  box-shadow: 2px 3px 7px 0px #393939;
}
	/*ルビ文字装飾*/
	.btn-main ruby[data-ruby] rt {
	  display: none;
	}
	 
	.btn-main ruby[data-ruby] {
	  position: relative;
	  display: inline-block;
	}
	 
	.btn-main ruby[data-ruby]::after {
		content: attr(data-ruby);
	    position: absolute;
	    transform: translate(-50%, -1.7em);
	    display: block;
	    left: 50%;
	    top: 0;
	    white-space: nowrap;
	    font-size: 44%;
	    letter-spacing: 3px;
	    line-height: 20px;
	}

.btn-ghost {
  background:var(--card);
  color:var(--ink);
  box-shadow: 2px 3px 7px 0px #393939;
}

.btn-ghost:hover {
  background:#fff;
  color:var(--accent-deep);
}

.controls svg {
  width:17px;
  height:17px;
}

/* ---------- モーダル（完成図・完成） ---------- */
.modal {
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(40,25,15,.55);
  /*backdrop-filter:blur(3px);*/
  /*animation:fade .2s ease;*/
}

.modal[hidden] {
  display:none;
}

@keyframes fade {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

.modal-card {
  width:100%;
  max-width:380px;
  background:var(--card);
  border-radius:24px;
  padding:24px 22px;
  text-align:center;
  box-shadow:0 30px 60px -20px rgba(40,25,15,.5);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  /*animation:pop .24s cubic-bezier(.34,1.4,.5,1);*/
}
.modal-card.win-card{
    border-radius: 0px;
    background: #fffbc4;
    padding: 0px;
}

@keyframes pop {
  from {
    transform:scale(.9);
    opacity:0;
  }
  to {
    transform:scale(1);
    opacity:1;
  }
}

.modal-title {
    font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
    font-size: 22px;
    font-weight: 500;
    font-style: normal;
    background: #ffffffd9;
    letter-spacing: 2px;
}

.modal-img {
  width:100%;
  aspect-ratio:1/1;
  /*border-radius:18px;*/
  background-size:cover;
  background-position:center;
  /*box-shadow:inset 0 0 0 3px rgba(255,255,255,.6), 0 12px 24px -14px var(--shadow);*/
}

.win-card{
  gap:14px;
}

.win-card .win-card-maxc{
	max-width: 93%;
	margin: 0 auto;
}
	.win-card .win-card-maxc .modal-img{
		width: 90%;
	    margin: 10px auto;
	}

.win-badge {
  font-weight:900;
  font-size:clamp(26px,8vw,34px);
  color:var(--gold);
  /*text-shadow:0 3px 0 rgba(120,80,40,.18);*/
  letter-spacing:.04em;
}
	.modal-card.win-card .win-badge{
	    font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
	    font-size: 27px;
	    font-weight: 500;
	    font-style: normal;
	    line-height: 36px;
	    letter-spacing: 2px;
	    background: #fccb00;
	    color: #00a0e9;
	    width: 100%;
	    padding: 10px;
	}

.win-msg {
  /*font-size:14.5px;
  font-weight:700;
  line-height:1.6;
  color:var(--ink);
  background:#fff7ef;
  border-radius:14px;
  padding:13px 15px;*/
	width: 100%;
	font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
	font-size: 20px;
	font-weight: 500;
	font-style: normal;
    line-height: 36px;
	letter-spacing: 1px;
	color: #754c24;
	text-align: left;
    margin: 10px 0px;
}
	/*ルビ文字装飾*/
	.win-msg ruby[data-ruby] rt {
	  display: none;
	}
	 
	.win-msg ruby[data-ruby] {
	  position: relative;
	  display: inline-block;
	}
	 
	.win-msg ruby[data-ruby]::after {
		content: attr(data-ruby);
	    position: absolute;
	    transform: translate(-50%, -1.7em);
	    display: block;
	    left: 50%;
	    top: 0;
	    white-space: nowrap;
	    font-size: 44%;
	}

.win-btns {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:90%;
  margin: 20px auto;
}

.win-btns .big-btn {
  width:100%;
}